Question

我有一个包含列表项目的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);

    });
});

Answer 1

你应该使用“toggle”而不是click（）：

$(document).ready(function() { $('#btn_switch').toggle(
    function () { /*show*/ },
    function () { /*hide*/ }
);});

http://api.jquery.com/toggle-event/

Answer 2

我不太确定我是否理解你的问题，但我会尽力回答。如果您希望在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和照片实例，你应该使用类而不是ID

$("*").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("+");
      });

第一部分将类Active添加到鼠标悬停的任何内容上，因此只有一个Active btn_switch会切换任何内容。这是假设加号/减号按钮位于.photo之上，否则照片上不会附加活动类。

点击时，JQuery切换加/减按钮图标和动画图像

2 个答案: