CODEWITHSUNDEEP
javascriptjqueryhtml
Neo
Neo

Reputation: 407

fadeToggle is malfunctioning with animate width?

Here is my attempt at replicating the code I have. For some reason, the code works perfectly in jsfiddle, but malfunctions with my own website. Maybe someone can somehow figure out what the issue is regardless.

http://jsfiddle.net/neowot/g0teoyrc/

So like I said, it works well in jsfiddle, but in my actual website, clicking the Button makes Div2 instantly disappear and then instantly reappear again before beginning its fade animation. Obviously this looks very bad and weird.

Does anyone have ideas as to what might be happening?

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); 


});

Upvotes: 0

Views: 97

Answers (1)

Ritesh Karwa
Ritesh Karwa

Reputation: 2254

Works for me as fiddle

<!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>

Upvotes: 1

Related Questions