img仅在第二次点击后旋转

时间:2013-12-07 04:04:23

标签: javascript jquery html rotation

所以我真的很擅长jQuery /所有我有一个img,应该在同时切换时旋转,除了在第一次点击它不旋转但仍然切换,每次点击从那里出来旋转和切换,然后img倒退!

<script>
$(document).ready(function(){
    $("#center").hide();
    $("div.center").hide();
    $("img.plath.intro").hide();
    $("#footer").hide();
    $("div.left").hide();
});

$(document).ready(function(){
    var angle = 0;
    $("img.uparrowimg").click(function(){
        $(this).rotate({
            bind:{
                click: function(){
                    angle +=180;
                    $(this).rotate({animateTo:angle,easing: $.easing.easeInOutExpo })
                }
            }
        });
        $("#center").toggle(1000);
        $("#menu").toggle(1000);
        $("#footer").toggle(1000);
        $("img.plath.intro").toggle(1000);
        $("div.center").toggle(1000);
        $("div.left").toggle(1000);
        $("#divtext").hide();
    });
});

$(document).ready(function(){
    $("#divtext").hide();
    $("img.PlathIntro").click(function(){
        $("#divtext").fadeIn(3000);
    });
});
</script>

1 个答案:

答案 0 :(得分:0)

这是因为你已经将click功能限制在另一个内部,所以第一次点击时它还没有准备好 - 它是在第一次点击时设置的。

$("img.uparrowimg").click(function(){ // <-- waiting for a click
    $(this).rotate({
        bind:{
            click: function(){ // <-- this is bound when that first click occurs 

您需要将click设置与click事件分开。你可以链接这样的两件事

    $("img.uparrowimg").rotate({
        bind:{
            click: function(){
                angle +=180;
                $(this).rotate({animateTo:angle,easing: $.easing.easeInOutExpo })
            }
        }
    }).click(function(){
        $("#center").toggle(1000);
        $("#menu").toggle(1000);
        $("#footer").toggle(1000);
        $("img.plath.intro").toggle(1000);
        $("div.center").toggle(1000);
        $("div.left").toggle(1000);
        $("#divtext").hide();
    });

顺便说一句,你可以一次选择很多东西

$("#center, #menu, #footer, img.plath.intro, div.center, div.left").toggle(1000);

或者您可以使用类并将该类添加到HTML

中的所有元素
<div id="menu" class="toggles">...</div>
<div id="footer" class="toggles">...</div>

$(".toggles").toggle(1000);