Question

所以我已经将这部分代码的一半用于工作，但我似乎无法完成剩下的工作。

我可以让div淡入，但不能移动图像。

var mouse_is_inside = false;

$(document).ready(function() {
$(".how_btn").click(function() {
    var howWorks = $("#jhow_works");
    if (howWorks.is(":visible"))
        howWorks.fadeOut("fast");
    else
        howWorks.fadeIn("fast");
    return false;

    $("#spot-1").animate({ 
    marginLeft: "+=40px",
}, 2000 );

});


$("#jhow_works").hover(function(){ 
    mouse_is_inside=true; 
}, function(){ 
    mouse_is_inside=false; 
});

$("body").click(function(){
    if(! mouse_is_inside) $("#jhow_works").fadeOut("fast");
});
});

css

#jhow_works {
display:none;
position:absolute;
width:440px;
margin:310px 150px 0 360px;
}

img#spot-1 {
position: absolute;
margin-left: 55px;
margin-top: 20px;
}

html

    <div id="jhow_works">
    <div id="how_wrapper">
        <img id="spot-1" src="../images/spot.png" alt="" >
    </div>
</div>


        <div id="how_it_works">
        <div id="logo_how"><a class="how_btn"  href="..."><img class="how_button" src="../images/how_it_works_logo.png" alt="How it works!" ></a></div>
        <div id="text_how"><a class="big how_btn"  href="..."><strong class="big_bold_main">How</strong>&nbsp;it Works</a></div>
    </div>

我必须在这里做些蠢事。我感谢任何帮助

谢谢！

Answer 1

将return语句移动到click函数的末尾。

$(".how_btn").click(function() {
  var howWorks = $("#jhow_works");
  if (howWorks.is(":visible"))
    howWorks.fadeOut("fast");
  else
    howWorks.fadeIn("fast");

  $("#spot-1").animate({ 
  marginLeft: "+=40px"}, 2000 );

  return false;
});

Answer 2

我打算用Heather上面提供的相同代码回答，所以我只是发布一些关于return false;的有用信息的链接。此信息由另一个Stack Overflow用户在另一个问题What does "return false;" do?

中提供

希望这有助于某人。

只有一半的jQuery动画工作。我似乎可以让所有这些工作

2 个答案: