soldier soldier - 4 months ago 24
jQuery Question

jQuery div fading out onload issue

i'm having a very frustrating problem.
Basically my intention was to animate a div on click using the .toggle() class in jQuery.
The problem is that on-load the div just disappears! i really can't figure it out why... (the actual script has ended at the end of CSS code section of code below, i don't know why)

Here's JsFiddle link

HTML

<body>

<!-- NAV -->

<!-- SLIDER ONE-->
<div class="container-fluid slides" style="padding-left: 0px; padding-right: 0px;">
<!-- SLIDER ONE-->
<div class="slider-one1 col-md-6 col-sm-6 col-xs-6"></div>
<div class="slider-one2 col-md-6 col-sm-6 col-xs-6"></div>

<div class="clearfix"></div>

<!-- SLIDER TWO-->
<div class="slider-two1 col-md-6 col-sm-6 col-xs-6"></div>
<div class="slider-two2 col-md-6 col-sm-6 col-xs-6"></div>

</div>


<!-- cookies notificaton -->
</body>


CSS

html, body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden; }


.slides div:hover {
opacity: 0.8; }


.slider-one1 {
height: 40vh;
width: 50vw;
background-color: red;
cursor: pointer; }


.slider-one2 {
height: 40vh;
width: 50vw;
background-color: green;
opacity: 0; }


.slider-two1 {
height: 40vh;
width: 50vw;
background-color: blue;
opacity: 0; }


.slider-two2 {
height: 40vh;
width: 50vw;
background-color: pink;
opacity: 0; }


Javascript

$(window).ready(function(){
$(".slider-one1").toggle(function() {
$(this).stop().animate({
width: "98vw"
}, 500);
}, function() {
$(this).stop().animate({
width: "50vw"
}, 500);
});

});


Thank you!

Answer

There is no ready function for window, it should be document instead of window.

$(document).ready(function(){.....});

UPDATED

For animations avoid .animate() of jquery it will make your code more complex, write css classes instead and use css transitions for animations here is a demo.

.animate1 {
  width: 98vw !important;
 -webkit-transition:all 0.5s ease;
 transition:all 0.5s ease; 
}

 $(document).ready(function(){
   $(".slider-one1").click(function(){   
        $(this).toggleClass("animate1");
   });

});

Working Fiddle