Ошибка бесконечного цикла при попытке использовать функцию mouseover

Question

Это заставляет меня сходить с ума в течение последних нескольких дней, и я не могу понять это. Я не так удобен с JQuery. Я использую Спонсор стену плагин:

http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

Что я пытаюсь сделать, это создать функцию, где на MouseEnter переворачивает изображение, а на MouseLeave, изображение будет перевернуть обратно в исходное состояние.

Прямо сейчас я получаю бесконечную ошибку цикла.

Я пытаюсь несколько решений размещены здесь, но мы не повезло :-(

Это мой код. Если кто-то может помочь, что будет здорово.

Большое спасибо !!!

$(document).ready(function(){ 
/* The following code is executed once the DOM is loaded */ 

$('.sponsorFlip').bind("mouseover",function(){ 

    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed): 

    var elem = $(this); 

    // data('flipped') is a flag we set when we flip the element: 

    if(elem.data('flipped')) 
    { 
     // If the element has already been flipped, use the revertFlip method 
     // defined by the plug-in to revert to the default state automatically: 

     elem.revertFlip(); 

     // Unsetting the flag: 
     elem.data('flipped',false) 
    } 
    else 
    { 
     // Using the flip method defined by the plugin: 

     elem.flip({ 
      direction:'tb', 
      speed: 350, 
      onBefore: function(){ 
       // Insert the contents of the .sponsorData div (hidden from view with display:none) 
       // into the clicked .sponsorFlip div before the flipping animation starts: 

       elem.html(elem.siblings('.sponsorData').html()); 
      } 
     }); 

     // Setting the flag: 
     elem.data('flipped',true); 
    } 
}); 

}); 

Answer 1

Изменить: Я извиняюсь, я неправильно прочитал ваш предыдущий код (я видел «MouseEnter», когда она «Mouseover»)

ли вы рассмотреть вопрос об использовании «MouseEnter» и «MouseLeave», а т han mouseover? Это позволит вам отделить вашу логику (вместо условного if/else) и соответствующим образом обработать событие?

Что-то вроде:

$(document).ready(function() { 
    $('.sponsorFlip').bind({ 
     /* FLIP ON ENTER */ 
     'mouseenter': function(e){ 
      var $el = $(this); 
      $el.flip({ direction: 'lr', 
       speed: 350, 
       onBefore: function() { 
       $el.html($el.siblings('.sponsorData').html()); 
       } 
      }); 
     }, 
     /* REVERT ON LEAVE */ 
     'mouseleave': function(){ 
       var $el = $(this); 
       $el.revertFlip(); 
      } 
     });   
    }); 

Вот JS Fiddle: http://jsfiddle.net/gX2WY/2/

(я удалил флип/revertFlip от JS скрипку, чтобы предотвратить ошибку - но концепция есть!)

Изменить (легче читать, чем мои комментарии) Вот ссылка на скрипт JS с изменениями, которые я сделал: http://jsfiddle.net/VJsrj/ Вот ссылка на zip с изменениями: http://www.box.com/s/v5ov3tl09xhr6gf1cj78

Замечание - плагин Flip имеет несколько особенностей в отношении метода «revertFlip». В частности, это не поклонник вызова, когда он оживляет. Я играл с некоторой логикой, которая откладывала бы этот метод от вызова (если вы выходите из анимации), но в конечном итоге решила его удалить (это вызвало несколько других проблем)

Одна вещь, которую я бы предложил (возможно на будущее) рассматривает CSS для ваших визуальных эффектов и постепенно «улучшает» этот опыт для пользователей, просматривающих ваш сайт с поддерживаемыми браузерами.

Например:

http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html

Эта страница функционален во всех современных браузерах, но особенно интересна в WebKit на основе браузеров (Chrome/Safari) - Вы могли бы имитировать подобное поведение, имея основной " : hover "и расширяет это для браузеров, которые его поддерживают!

Удачи вам! Дайте мне знать, если у вас есть дополнительные вопросы :)

Answer 2

вам нужно связать событие mouseout!

Answer 3

Ваш неправильный адрес .bind().Попробуйте это:

$('.sponsorFlip').bind(mouseover: function(){ 
    ... 

Однако, если вы используете JQuery 1.7 или выше, рекомендуется использовать .on() вместо .bind(). Вот пример .on():

$('.sponsorFlip').on("mouseover",function(){ 
    ... 

Кроме того, вы пропустили точку с запятой после elem.data('flipped',false) в первой половине кода. Это может быть не обязательно, но всплывайте там на всякий случай.