Как использовать анимацию и addclass вместе

Question

Я пытаюсь анимировать элемент на моей странице. Я искал эффект масштабирования с условием щелчка. Вы щелкаете 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», чтобы увидеть эффект

Спасибо за вашу поддержку!

UPDATE !!

Я не использую Div им с помощью HTML5 CSS3, и они просто рисунок/фигура теги и мой CSS идет как #container фигура {}

ли это предотвратить addclass работать?

Answer 1

Подсветка синтаксиса сообщает все - вам нужно удалить обратную косую черту. .live() также принимает только одну функцию, поэтому объединить два в одной и той же функции:

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

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

Answer 2

Не знаю, почему у вас есть вложенные функции или отводящей косой черты. вы должны это сделать ...

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

Answer 3

Будьте осторожны с вашими запятыми после опций анимации. Это вызовет проблемы в 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'); 
    }); 
});