首先點擊動畫，第二個反向動畫：如何？

我已經讀過其他幾個這樣的問題，但他們基本上使用已棄用的.toggle()函數。我很努力實現div#p第一次點擊右轉，第二次點擊返回到開始位置。首先點擊動畫，第二個反向動畫：如何？

我寫了這個代碼：

$(function(){ 
    $("#p").on("click", function(){ 
     if ($("#p").data("right") == 'n') { 
      $("#p").animate({marginLeft:"50"}, 500); 
      $("#p").data("right", 'y'); 
     } else { 
      $("#p").animate({marginLeft:"0"}, 500); 
      $("#p").data("right", 'n'); 
     } 
    }) 
})

這是一個很大的錯誤工作：頁面加載後，第一次點擊火災沒有（第二等的點擊正確的切換動畫動作）。

這裏有什麼問題，如何解決這個問題？

來源

2013-07-16 Miloš Đakonović

使用的jsfiddle –

這依賴於P的默認狀態，您可以創建一個演示if-else語句，我有第一個自動發射的第二個動畫。我試過了。 – 2013-07-16 10:07:04

$(function(){ 
    $("#p").on("click", function(){ 
     var state = parseInt($(this).css('margin-left'), 10) > 0; 
     $(this).animate({marginLeft : state ? 0 : 50}, 500); 
    }); 
});

或數據，並佔不確定的數據值：

$(function(){ 
    $("#p").on("click", function(){ 
     var state = $(this).data("right"); 
     $(this).animate({marginLeft: (state ? 50 : 0)}, 500); 
     $(this).data("right", !state); 
    }); 
});

來源

2013-07-16 10:06:46 adeneo

您的第一個解決方案是正確的，其次我得到與我自己一樣的結果。無論如何非常感謝，我一直在努力掙扎幾個小時...... –

您正在嘗試獲取data-right，但我認爲您已經設置了該設置。您應該在加載頁面時進行設置，以便實際檢索它。要麼使用.ready()或者只是添加data-right您<p>

來源

2013-07-16 10:06:33 Robbietjuh

如果我宣佈的數據權之前的任何地方提供的HTML，想必你也沒有設置**數據右面的**正確 –

你是雙擊嗎？這是一個if-else聲明，它不能同時啓動...... – Robbietjuh

不，但現在我懷疑瀏覽器可能有問題，即使我知道這是非常罕見的情況... –

我寫了類似的代碼從這個線程的想法。這是爲1格，但它可以重寫標記爲「p」，因爲你在這個線程中使用。

$(".content").click(function() { 
    if($(this).hasClass("vysun")){ 
     var status = true; 
     $(this).removeClass("vysun"); 
    } 
    else{ 
     var status = false; 
     $(this).addClass("vysun"); 
    } 
    $(this).animate({width : status ? "33%" : "100px"}, 1500, "linear"); 
});

來源

2014-03-31 06:30:28

首先點擊動畫，第二個反向動畫：如何？

回答

相關問題