3

我有一个简单的代码来单击按钮并使用 jquery animate color 切换 div 大小和颜色，但问题是切换事件发生而不单击并且按钮消失

html：

<input type="button" id="togglemove" value="toggle div1 move" />

<input type="button" id="toggle" value="toggle" /> 

<div class="div1"></div>

jQuery：

$(document).ready(function(e) {

$("#toggle").toggle(click1,click2);
$("#togglemove").toggle(move1,move2);
    });

function move1(){
    $(".div1").animate({"left":"200px"},1000);
}

function move2(){
    $(".div1").animate({"left":"100px"},1000);
}
function click1(){
    $("div.div1").animate({"width":"400px","border-radius":"10px",'background-color': '#400101','left':'200px'},1000);
}
function click2(){
    $("div.div1").animate({"width":"200px","border-radius":"0",'background-color': '#000000','left':'100px'},1000);
}

住在 jsfiddle 上：http: //jsfiddle.net/kaNP4/

4

3 回答 3

8

在 jQuery 1.9 版本中删除了切换的这种特殊用途，因此您需要自己实现切换功能。下面给出了一个示例实现

看

$(document).ready(function(e) {

    $("#toggle").click(function(){
        var state = $(this).data('toggleState');
        if(state){
            click2();
        } else {
            click1();
        }
        $(this).data('toggleState', !state);
    });
    $("#togglemove").click(function(){
        var state = $(this).data('toggleState');
        if(state){
            move2();
        } else {
            move1();
        }
        $(this).data('toggleState', !state);
    });
});

演示：小提琴

于 2013-07-01T07:38:43.100 回答
1

您没有单击事件的侦听器。也许你的代码应该是这样的：

$(document).ready(function() {

$("#toggle").click(function(){
   if($(this).attr("class") != "bigger"){
      click1();
      $(this).addClass("bigger");
   } else {
      click2();
      $(this).removeClass("bigger");
   }
});

$("#togglemove").click(function(){
   if($(this).attr("class") != "bigger"){
      move1();
      $(this).addClass("bigger");
   } else {
      move2();
      $(this).removeClass("bigger");
   }
});
});
于 2013-07-01T07:32:19.210 回答
-1

您可以修改脚本以使其像这样工作

HTML：

<input type="button" id="togglemove" value="toggle div1 move" onclick="buttonClicked()" />

<input type="button" id="toggle" value="toggle" onclick="buttonClicked2()"/>

JAVASCRIPT：

function buttonClicked() {
    $("#togglemove").toggle(move1,move2);
}

function buttonClicked2() {
    $("#toggle").toggle(click1,click2);
}

function move1(){
    $(".div1").animate({"left":"200px"},1000);
}

function move2(){
    $(".div1").animate({"left":"100px"},1000);
}

function click1(){
    $("div.div1").animate({"width":"400px","border-radius":"10px",'background-color': '#400101','left':'200px'},1000);
}

function click2(){
    $("div.div1").animate({"width":"200px","border-radius":"0",'background-color': '#000000','left':'100px'},1000);
}
于 2013-07-01T07:37:19.727 回答