CODEWITHSUNDEEP
jqueryhtmlcss
farkhund abbas
farkhund abbas

Reputation: 75

hide div with flip effect

I am new to website development. My code is working perfectly. The thing I just want is that, when I click on the first div it disappears with a flip animation and the second div appears. Then when I click on the second div the same animation happens as the third div appears. I just want CSS or jQuery code to flip the div when it disappears. 

<div class="row">
    <div class="col-md-6 abc">
        <div style="background:grey">
            text here
        </div>
        <div style="background:blue;display:none">
            text here
        </div>
        <div style="background:green;display:none">
            text here
        </div>
    </div>
</div>

$('.col-md-6').click(function() {
    var $current = $(this).find('div:visible');
    var $next = $current.next()
    if ($next.length) {
        $current.hide();
        $next.show();
    }
});

Upvotes: 4

Views: 1895

Answers (4)

Abhishek Singh
Abhishek Singh

Reputation: 1

Please try this one

 $('.col-md-6').click(function() {
   var $current = $(this).find('div:visible');
   var $next = $current.next()
   if ($next.length) {
       $current.hide(1000);
       $next.show(1100);
   }
   });

Upvotes: 0

Gagan
Gagan

Reputation: 130

Try this,

$('.col-md-6').click(function() {
	var $current = $(this).find('div:visible');
	var $next = $current.next()
	if ($next.length) {
		$current.animate({
			borderSpacing: -180
		}, {
			step: function(now, fx) {
				$(this).css('-webkit-transform', 'rotateY(' + now + 'deg)');
				$(this).css('-moz-transform', 'rotateY(' + now + 'deg)');
				$(this).css('transform', 'rotateY(' + now + 'deg)');
			},
			complete: function() {
				$(this).hide();
			},
			duration: 'slow'
		}, 'swing');
                $next.animate({
		borderSpacing: -360
	}, {
		step: function(now, fx) {
			$(this).css('-webkit-transform', 'rotateY(' + now + 'deg)');
			$(this).css('-moz-transform', 'rotateY(' + now + 'deg)');
			$(this).css('transform', 'rotateY(' + now + 'deg)');
		},
		duration: 'slow'
	}, 'swing').show();
		
	}
});

Upvotes: 1

jonny
jonny

Reputation: 3098

On the link you provided as an example, you can follow a couple links that bring you to the example page, that has all the source code and a detailed tutorial how to achieve the exact effect you wanted. It pays to look around a bit first!

Upvotes: 0

Mahabub Islam Prio
Mahabub Islam Prio

Reputation: 1085

Its quite tough to get a idea about which flipping idea you need . This is a link of a work which is a library . And I hope it can help .

FLIP LIB

Upvotes: 0

Related Questions