如何讓這個動畫div在一個按鈕中返回？

<script> 
$("#right").click(function(){ 
    $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);; 
}); 
</script>

這是我的腳本。如您所見，我想將.block左右移動使用按鈕，但我找不到如何使其在一個按鈕中工作。如何讓這個動畫div在一個按鈕中返回？

，所以我希望按鈕來觸發.block向右移動（在第一次單擊），並將其移動後，觸發.block向左移動（第二次點擊）。並可以反覆工作。

我該怎麼做？我應該使用'if'功能嗎？

來源

2013-03-09 user2150708

有;;在左側末尾點擊.. – 2013-03-09 05:05:22

嘗試：Sample

$("#right").click(function() { 
    if (!$(".block").hasClass("Moved")) { 
     $(".block").animate({ 
      "left": "+100px" 
     }, "slow").fadeTo("slow", 0.33).addClass("Moved"); 
    } else { 
     $(".block").animate({ 
      "left": "+50px" 
     }, "slow").fadeTo("slow", 0.99).removeClass("Moved"); 
    } 
});

另一種選擇：

使用小插件，像這樣的;

(function($) { 
    $.fn.clickToggle = function(func1, func2) { 
     var funcs = [func1, func2]; 
     this.data('toggleclicked', 0); 
     this.click(function() { 
      var data = $(this).data(); 
      var tc = data.toggleclicked; 
      $.proxy(funcs[tc], this)(); 
      data.toggleclicked = (tc + 1) % 2; 
     }); 
     return this; 
    }; 
}(jQuery));

而在你的頁面的任何地方使用它像：

$("#right").clickToggle(function() { 
    $(".block").animate({ 
     "left": "+100px" 
    }, "slow").fadeTo("slow", 0.33); 
}, function() { 
    $(".block").animate({ 
     "left": "+50px" 
    }, "slow").fadeTo("slow", 0.99);; 
});

來源

2013-03-09 05:13:46 Anujith

哇，那就是我真正想要的！謝謝！ – user2150708 2013-03-09 07:37:13

嘗試

$(".left").toggle(function(){ 
    $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33); 
}, function(){ 
    $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99); 
});

你可以閱讀更多有關.toggle（）位置：http://api.jquery.com/toggle-event/

來源

2013-03-09 04:48:47 akasfei

您正在使用的'.toggle（）'已經從jQuery 1.9中移除了 – Blender 2013-03-09 04:51:54

你在做什麼是如下。

$("#right").click(function(){ 
    $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);; 
});

每次你點擊向左或向右，都將增加左屬性，意味着沒有向右移動動畫代碼存在。

同樣來自左擊事件代碼刪除;;。

嘗試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>StackOverFlow</title> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() 
     { 
      $("#right").click(function(){ 
       $(".block").animate({ 
        left: "100px" 
       }, 1500); 
      }); 

      $("#left").click(function(){ 
       $(".block").animate({ 
        left: "0" 
       }, 1500); 
      }); 
     }); 
    </script> 
</head> 
<body> 

<div> 
<button id="left" type="button">Left</button> 
<button id="right" type="button">Right</button> 
</div> 

<div class="block" style="border:1px solid red;width:100px;height:100px;position: absolute;"></div> 

</body> 
</html>

來源

2013-03-09 05:07:46

這是qhat你要找的人？

HTML：

<div class="block"></div> 
<button type="button" id="move">Move</button>

的jQuery：

$("#move").click(function() { 
    $(".block").animate({ 
     left: "+100px" 
    }, "slow") 
     .animate({ 
     opacity: 0.33 
    }, "slow") 
     .animate({ 
     left: "+50px" 
    }, "slow") 
     .animate({ 
     opacity: 0.99 
    }, "slow"); 
});

CSS：

.block { 
    background: blue; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
#move { 
    margin-top: 150px 
}

小提琴here

來源

2013-03-09 05:15:39 darshanags

謝謝，但這種效果是不是我試圖找到的... 但無論如何謝謝你！ – user2150708 2013-03-09 07:39:17

如何讓這個動畫div在一個按鈕中返回？

回答

相關問題