如何让这个动画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在一个按钮中返回？

回答

相关问题