jquery flippy - 停止翻轉發生

嗨我正在使用一個flippy jquery插件http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/這是偉大的，但當元素翻轉我想在另一側有一個按鈕，用戶可以點擊並進入不同的頁面。jquery flippy - 停止翻轉發生

麻煩的是，當單擊元素的另一側時，任何div都會導致翻轉再次發生。

我需要停止翻轉，如果用戶點擊了翻轉元素

http://jsfiddle.net/hw7rP/2/

<div class="left bigbox sponsor"> 
    <div class="sponsorFlip"> 
     the front 
    </div> 

    <div class="sponsorData"> 
     <div class="ifIgetClickedDontFlip">click me</div> 
    </div> 
</div>

$('.sponsorFlip').bind("click",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:'lr', 
      speed: 350, 
      color: '#000', 
      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()); 
      }, 
      onEnd: function(){ 
       //iniatiate ajax requests every second 
      } 
     }); 
     // Setting the flag: 
     elem.data('flipped',true); 
    } 
});

誰能幫我出內一個div發生的一些方法？

來源

2014-07-21 crazy sarah

翻頁後，如果你想重定向到其他頁面，當你再次點擊頁面或按鈕，你可以做到這一點。

$('.sponsorFlip').bind("click",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 

     // Write your code here to redirect it to some other page. 

    }else{ // Using the flip method defined by the plugin: 
      elem.flip({ 
      direction:'lr', 
      speed: 350, 
      color: '#000', 
      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()); 
         }, 
       onEnd: function(){ 
      //iniatiate ajax requests every second 
        } 
      }); 
     // Setting the flag: 
     elem.data('flipped',true); 
    } 
});

在if(elem.data(flipped))裏面，你可以給代碼重定向到你需要的頁面。

來源

2014-07-21 17:37:53

這並不完全符合我後。翻轉側的div將包含到另一頁的鏈接。所以這不是我想要重定向，而是我希望內部div可點擊而不會再次發生翻轉 –

在小提琴中，當您點擊div時不會翻轉div。檢查這個小提琴http://jsfiddle.net/hw7rP/3/，這你想要什麼？ –

嗨洛根，不完全。我希望能夠在用戶點擊除了我想要的鏈接之外的div的其他任何地方時將該div翻轉回來。如果他們點擊鏈接，他們會轉到另一個頁面，並且div不會翻轉。點擊鏈接外部，但在div中，它恢復正常翻轉 –

我們可以檢查點擊的元素或其父項中的任何一個是否具有.doNotFlipMe的類，如果其中任何一項檢查評估爲真，則不要翻轉。簡單！

HTML：

<div class="left bigbox sponsor"> 
    <div class="sponsorFlip">the front</div> 
    <div class="sponsorData"> 
     <div>Some other content here 
      <div class='doNotFlipMe'><a href="www.somesite.com">click me</a> 
      </div> 
     </div> 
    </div> 
</div>

的Javascript：

$('.sponsorFlip').bind("click", function (e) { 
     // $(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: 
      targetEl = $(e.target); 
      if (targetEl.hasClass('doNotFlipMe') || targetEl.parents('.doNotFlipMe').length) { 
       // Do nothing 
      } else { 
       elem.revertFlip(); 
       // Unsetting the flag: 
       elem.data('flipped', false); 
      } 
     }

演示：http://jsfiddle.net/robschmuecker/5EnfW/

來源

2014-07-22 07:44:35

jquery flippy - 停止翻轉發生

回答

相關問題