JQuery可切换加号/减号按钮图标，并可在单击时设置图像动画
JQuery可切换加号/减号按钮图标，并可在单击时设置图像动画
提问于 2011-06-24 06:39:45
我有一个包含列表项的div，一张照片，以及在div底部的加号/减号图标。
列表项绝对位于照片的后面。当我点击加号按钮时，我希望它变成减号，并从顶部开始动态显示29px的照片，显示它后面的列表项。然后，我想单击减号按钮，将其改回正号，并使照片动画回到顶部。
我正在尝试完成一些与你在Kyanmedia.com上看到的非常相似的事情。除了它们的图像在悬停时上下移动。我想要我的图像动画向下，然后点击并切换加号/减号图像。我试过了，但不起作用。
$(document).ready(function() {
$('#btn_switch').click(function () {
$(this).addClass('on')
$('.photo').animate({ top: '29px'}, 500);
}, function() {
$(this).removeClass('on')
$('.photo').animate({ top: '0px'}, 500);
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-24 06:46:18
你应该使用“切换”而不是click()：
$(document).ready(function() { $('#btn_switch').toggle(
function () { /*show*/ },
function () { /*hide*/ }
);});http://api.jquery.com/toggle-event/
Stack Overflow用户
发布于 2011-06-24 06:47:08
我不太确定我是否正确理解了你的问题，但我会尽我所能回答它。如果您希望在onClick事件之后使图像向上而不是向下设置动画，这应该是可行的：
$(document).ready(function(){
$('#btn_switch').click(function () {
$('.photo').animate({ top: '29px'}, 500);
$('.photo').animate({ top: '0px'}, 500);
});
});关于切换正负图像的部分，你能更好地解释一下吗？
编辑:我想我明白你的意思了。我在我的网站上使用了以下代码来打开和关闭抽屉：
var oddClick = true;
$("#btn_switch").click(function() {
$(".photo").animate({top: (oddClick) ? "0px" : "29px"},500);
if(oddClick){
$("#btn_switch").html("-");
}
else{
$("#btn_switch").html("+");
}
oddClick = !(oddClick);编辑III:下面是使用.toggle方法的相同解决方案：
首先，如果您有多个btn_switch和实例，则应该使用类而不是if
$("*").mouseover(function(){
$(this).addClass("Active");
});
$("*").mouseout(function(){
$(this).removeClass("Active");
});
$(".btn_switch.Active").toggle(function(){
$(".photo.Active").animate({top:29}, 500);
$(".btn_switch.Active").html("-");
},
function(){
$(".photo.Active").animate({top:0}, 500);
$(".btn_switch.Active").html("+");
});第一部分将活动类添加到鼠标悬停在其上的任何对象上，因此只有活动的btn_switch才会切换任何内容。这是假设加号/减号按钮在.photo上，否则照片将不会有活动的类附加到它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6461460
复制相关文章
相似问题
腾讯云开发者
