soldier soldier - 6 months ago 52
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



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


<!-- cookies notificaton -->


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


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


Thank you!


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



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; 



Working Fiddle