嘿伙计们!我必须使用 jquery 制作一个滑动 div(左右)。这是我此刻所拥有的链接:http ://www.k-prim.biz/test/test.html 这工作正常,但我不知道如何在单击箭头图像时使 div 向左滑动在它已经向右移动之后。有什么帮助吗?
谢谢
嘿伙计们!我必须使用 jquery 制作一个滑动 div(左右)。这是我此刻所拥有的链接:http ://www.k-prim.biz/test/test.html 这工作正常,但我不知道如何在单击箭头图像时使 div 向左滑动在它已经向右移动之后。有什么帮助吗?
谢谢
只需尝试此代码而不是您的脚本端。
$(function(){
var i = 0;
$("#clicky").click(function(){
if(i==0){
i =1;
$("#slide").animate({marginLeft:'500px'},'slow', function(){
$("img#clicky").attr("src", "right.jpg");
});
}else{
i=0;
$("#slide").animate({marginLeft:'0px'},'slow', function(){
$("img#clicky").attr("src", "left.jpg");
});
}
});
});
替代方案可能是使用 css 转换的 css 方法。见 jsfiddle。
在这种情况下,点击句柄很简单(编辑点击处理程序 on div#slide
,因为箭头图像现在是它的背景,jsfiddle 会相应地调整):
$("#slide").click(function(){
var el= $(this)
,isRight = /right/i.test(el.attr('class'))
,addremove = isRight ? 'removeClass' : 'addClass';
el[addremove]('right');
});
<script>
var pos=0;
$(function(){
$("#clicky").click(function(){
if(pos==0)
{
$("#slide").animate({marginLeft:'500px'},'slow', function(){
$("img#clicky").attr("src", "right.jpg");
});
pos = 1;
}
else
{
$("#slide").animate({marginLeft:'0px'},'slow', function(){
$("img#clicky").attr("src", "left.jpg");
});
pos = 0;
}
});
});
</script>
这可以帮助您思考算法。
注意:未经测试的代码,已编辑。
jquery 的使用非常简单,如下所示
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>