Tuku Tuku - 4 years ago 109
Javascript Question

Someone can solve my jquery

I know very less amount of jquery can someone help me.. I have written the code but failed in last thing, that


  • image(from lest side) two and three should fade out and first image will slide left while clicking on button1. and same for button tow and three.

  • on clicking button1 if the first sections are active (left image and bottom text) then they should fade and re-appear with sliding effect.





$(".c2").css("display", "none");
$(".c3").css("display", "none");
$(".image03").css("display", "none");
$(".image02").css("display", "none");
$(document).ready(function() {
$('.img01').click(function() {
$(".image01").show("slide", {
direction: "left"
});
$(".c1").show("slide", {
direction: "right"
});
$(".c2").css("display", "none");
$(".c3").css("display", "none");
$(".image03").effect('fade', 200).css("display", "none");
$(".image02").effect('fade', 200).css("display", "none");
});

$('.img02').click(function() {
$(".image02").show("slide", {
direction: "left"
}, 500);
$(".c2").show("slide", {
direction: "right"
}, 500);
$(".c1").effect('fade', 200).css("display", "none");
$(".c3").effect('fade', 200).css("display", "none");
$(".image03").effect('fade', 200).css("display", "none");
$(".image01").effect('fade', 200).css("display", "none");
});
$('.img03').click(function() {
$(".image03").show("slide", {
direction: "left"
}, 500);
$(".c3").show("slide", {
direction: "right"
}, 500);
$(".c1").effect('fade', 200).css("display", "none");
$(".c2").effect('fade', 200).css("display", "none");
$(".image02").effect('fade', 200).css("display", "none");
$(".image01").effect('fade', 200).css("display", "none");
});
});

.slide {
padding-top: 30px;
}
.img01, .img02, .img03 {
cursor: pointer;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="img-show">
<div class="image01 slide"><img src="http://classes.yale.edu/fractals/panorama/nature/Rivers/RiversS.gif" class="img-responsive" /></div>
<div class="image02 slide"><img src="http://shalomisraeltours.com/wp-content/uploads/2011/03/Amud-Stream-Nature-Reserve-200x100.jpg" class="img-responsive" /></div>
<div class="image03 slide"><img src="http://naturepreserves.ohiodnr.gov/portals/dnap/WebSitesCreative_PostIt/27763/ec1ef173-8b35-414c-a8c3-ff06d141590e.jpg" class="img-responsive" /></div>
</div>
</div>
<div class="col-xs-6 img-ico">
<div class="img01 col-xs-4"><img src="http://www.codeproject.com/KB/buttons/netimagebutton/ExampleButton.png" width="43" height="31" />Design</div>
<div class="img02 col-xs-4"><img src="http://getsafesea.com/images/submit-button.png" width="43" height="31" />Design</div>
<div class="img03 col-xs-4"><img src="http://softwaresupportserviceshost.com/caaconnect/wp-content/uploads/sites/2/2013/06/login-button.png" width="43" height="31" />Design</div>
<div class="clearfix"></div>
<div class="content">
<div class="contentshow c1">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
<div class="contentshow c2">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
<div class="contentshow c3">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
</div>
</div>
</div><!--row-->
</div><!--container-->




Answer Source

I think the jQuery fadeOut() method will give you what you need. I have implemented a possible solution, hope I have understood your requirements. I have also taken the opportunity to refactor your code:

$(document).ready(function() {
  Reload('.image01', '.c1'); // first load

  $('.img01').click(function() {
    Reload('.image01', '.c1');
  });

  $('.img02').click(function() {
    Reload('.image02', '.c2');
  });
  $('.img03').click(function() {
    Reload('.image03', '.c3');
  });
});

function Reload(imageClass, contentClass) {
  $(".c1").fadeOut();
  $(".c2").fadeOut();
  $(".c3").fadeOut();
  $(".image01").fadeOut("slow", function() {
    $(".image02").fadeOut("slow", function() {
      $(".image03").fadeOut("slow", function() {
        $(imageClass).show("slide", {
          direction: "left"
        }, 500);
        $(contentClass).show("slide", {
          direction: "right"
        }, 500);
      });
    });
  });
}

Please see my demo here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download