Как использовать анимацию и addclass вместе - PullRequest
Новая
       3

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

0 голосов
/ 08 февраля 2011

Я пытаюсь оживить элемент на моей странице. Я ищу эффект увеличения с условием щелчка. Вы нажимаете div и этот div становится страницей.

Я заставляю анимацию работать. Однако функция addClass не работает.

Я также использую прокрутку для своих элементов, которые прокручиваются пользователем или автоматизированы. Так что div, управляющий прокруткой, исчез из-за моих реальных элементов. Когда я нажимаю на элемент, чтобы оживить его, он работает. Он становится шире и выше, но я не могу работать с позицией и z-индексом. Поэтому я попытался добавить функцию addClass, чтобы решить ее, но она не работает!?

Вот мой код 

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

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

Вы также можете попробовать это здесь тестовая страница Нажмите "le block 1", чтобы увидеть эффект

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

ОБНОВЛЕНИЕ !!

Я не использую div im с использованием HTML5 CSS3, и это просто теги цифр / цифр и мой css выглядит как #container figure {}

Не помешает ли addclass работать?

Ответы [ 3 ]

2 голосов
/ 08 февраля 2011

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

$("#bloc1").live( 'click', function() {
  $(this).animate({
    width: "800px",
    margin: "0px",
    height: "100%"
  },3000 ).addClass('figureclick') ; 
});
2 голосов
/ 09 февраля 2011

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

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

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

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