2011-02-08 65 views
0

我試圖在頁面中設置動畫元素。我正在尋找一種點擊條件下的縮放效果。你點擊一個div,該div成爲頁面。如何使用動畫和添加類加在一起

我得到的動畫工作。但是,addClass函數不起作用。

我還使用滾動來查看由用戶滾動或自動滾動的元素。所以控制滾動的div淡出了我的實際元素。當我點擊一個元素來設置它的動畫效果。它變得越來越寬,但我無法工作的位置和Z指數。所以我試圖添加一個addClass函數來解決它,但它不起作用!?

這裏是我的代碼

$("#bloc1").live('click', function(){ 
    $("#bloc1").animate({ 
     width: "800px", 
     margin: "0px", 
     height: "100%", 
    },3000); 

    $('#bloc1').addClass('figureclick'); 
}); 

你也可以嘗試一下歐這裏test page點擊「文件塊1」中看到的效果

感謝您的支持!

更新!

我不使用使用HTML5 CSS3一個div IM和他們只是普通的數字/數字標籤 和我的CSS是這樣的#container圖{}

難道防止addclass工作?

+0

以及它沒有變焦功能me..what就是問題所在?並請修復您的代碼格式 – corroded 2011-02-08 03:13:07

+0

縮放是動畫的一部分,但z-index不工作,並且來自addClass – MadeInDreams 2011-02-09 01:07:40

回答

2

語法突出顯示告訴所有人 - 您需要刪除轉義的反斜槓。 .live()也只需要一個功能,所以將二者結合起來到相同的功能:

$("#bloc1").live('click', function(){ 
    $("#bloc1").animate({ 
     width: "800px", 
     margin: "0px", 
     height: "100%", 
    },3000); 

    $('#bloc1').addClass('figureclick'); 
}); 
+0

轉義的斜線是有我使用PHP和我清理出來之前發佈和忘記它們。有沒有其他原因爲什麼這不起作用?順便我使用CSS 3所以它不是一個潛水它只是一個

和CSS就像#container圖{iive增加了一個類,它仍然does not工作 – MadeInDreams 2011-02-09 00:49:47

2

不知道爲什麼你有嵌套函數或逃避斜線。你應該可以做到這一點...

$("#bloc1").live('click', function() { 
    $(this).animate({ 
    width: "800px", 
    margin: "0px", 
    height: "100%" 
    },3000).addClass('figureclick') ; 
}); 
+0

轉義的斜線是有我使用PHP和我在發佈之前把它清理乾淨並忘記它們。有沒有其他原因爲什麼這不起作用?順便說一句,即時通訊使用css 3所以它不是一個潛水它只是一個

和css像#container figure {}添加了一個類,它仍然不起作用 – MadeInDreams 2011-02-09 00:49:23

2

在動畫選項後小心你的尾隨逗號。這會在IE中導致問題。

此外,您可以使用鏈接如下。

$("#bloc1").live('click', function(){ 
    $(this).animate({ 
     width: "800px", 
     margin: "0px", 
     height: "100%" 
    },3000).addClass('figureclick'); 
}); 

最後,如果你希望動畫後要添加的類別是完整的,你可以使用一個回調函數如下所示:再次

$("#bloc1").live('click', function(){ 
    $(this).animate({width: "800px", margin: "0px", height: "100%"}, 3000, function() { 
     $(this).addClass('figureclick'); 
    }); 
});