Question

这是我尝试复制我的代码。出于某种原因，代码在jsfiddle中完美运行，但在我自己的网站上出现故障。也许有人能够以某种方式弄清楚问题是什么。

就像我说的那样，它在jsfiddle中效果很好，但在我的实际网站中，单击按钮会使Div2立即消失，然后在开始淡入淡出动画之前立即重新出现。显然这看起来非常糟糕和奇怪。

有没有人对可能发生的事情有所了解？

HTML

<body>
    <section id="wrapper">
        <div id="button">B</div>
        <div id="Div1">Div1</div>
        <div id="Div2">Div2</div>
    </section>
</body>

CSS

#wrapper{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}
#Div1{
    height:400px;
    width:1000px;
    position:relative;
    float:left;
    background:blue;
}

#Div2{
    height:400px;
    width:380px;
    position:absolute;
    top:20;
    background:green;
    display:none;
    margin-left:380px; 
}

#button{
    width:20px;
    height:20px;
    background:orange;
    cursor:pointer;
}

JS

$('#button').click(function() {


    $('#Div2').fadeToggle(300);

    var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px"; 
    $('#Div1').animate( {'width': toggleWidth}, 300); 


});

Answer 1

适合我作为小提琴

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery animate </title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<style>
#wrapper{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}
#Div1{
    height:400px;
    width:1000px;
    position:relative;
    float:left;
    background:blue;
}

#Div2{
    height:400px;
    width:380px;
    position:absolute;
    top:20;
    background:green;
    display:none;
    margin-left:380px; 
}

#button{
    width:20px;
    height:20px;
    background:orange;
    cursor:pointer;
}

</style>
<body> 

<section id="wrapper">
        <div id="button">B</div>
        <div id="Div1">Div1</div>
        <div id="Div2">Div2</div>
</section>

  <script>
  $(document).ready(function(){

    $('#button').click(function() {


        $('#Div2').fadeToggle(300);

        var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px"; 
        $('#Div1').animate( {'width': toggleWidth}, 300); 


    });   
  });

  </script>
</body>
</html>

fadeToggle是否出现动画宽度错误？

1 个答案: