2013-03-09 50 views
3
<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'功能嗎?

+0

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

回答

2

嘗試: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);; 
}); 
+0

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

0

嘗試

$(".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/

+2

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

0

你在做什麼是如下。

$("#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> 
0

這是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

+0

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

相關問題