Welcome to WebmasterWorld Guest from 3.92.28.84

Forum Moderators: open

Message Too Old, No Replies

FadeIn FadeOut one div at a time

     
9:42 am on Dec 18, 2015 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I have the following set up, whereby when you click on the "Show…" link it then hides the current div and shows the hidden div. However what I can't figure out is how to do this one at a time i.e. at the moment when you click "Show…" it then does this same action to all blocks on the page.

Any ideas or help would be gratefully received.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.block {
border: 1px solid #333;
height: 200px;
width: 200px;
position: relative;
margin: 10px;
}

.front,.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.front {
background: #f5f5f5;
}

.back {
background: #333;
color: #fff;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="block">
<div class="front">
<p>Front</p>
<div class="toggle">Show Back</div>
</div>
<div class="back" style="display: none;">
<p>Back</p>
<div class="toggle">Show Front</div>
</div>
</div>
<div class="block">
<div class="front">
<p>Front</p>
<div class="toggle">Show Back</div>
</div>
<div class="back" style="display: none;">
<p>Back</p>
<div class="toggle">Show Front</div>
</div>
</div>
<script type="text/javascript">
$(".toggle").click(function() {
var sfilter = $(".block .front, .block .back"),
current = sfilter.filter(":visible").fadeOut(function() {
sfilter.not(current).fadeIn();
});
});
</script>
</body>
</html>
2:43 pm on Dec 18, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26



var sfilter = $(this).parents(".block").first().find(".front, .back"),

In other words, find the first ".block" ancestor, then find the ".front" and ".back" within that.
3:10 pm on Dec 18, 2015 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Thank-you, thank-you, thank-you. Really appreciate your help with this. Works perfectly.