html翻转切换div效果,图片翻转效果

图片翻转效果

* { margin: 0; padding: 0;}

ul { list-style-type: none;}

body { font: 14px "Microsoft Yahei"; overflow-x: hidden; background-color: #2B2B2B; }

h1 { width: 900px; margin: 40px auto 100px; font: 32px "Microsoft Yahei"; text-align: center; color: #D3D3D3; }

$(function(){

var $animate = $('#animate');

var $opposite = $('#opposite');

$(".wrap").hover(function(){

$animate.removeClass();

$opposite.removeClass();

$animate.addClass("test");

$opposite.addClass('test2');

},function(){

$animate.removeClass();

$opposite.removeClass();

$animate.addClass("test2");

$opposite.addClass('test');

});

$(".well-item").hover(function(){

$(this).find(".correct").children().removeClass();

$(this).find(".opposite").children().removeClass();

$(this).find(".correct").children().addClass("test");

$(this).find(".opposite").children().addClass('test2');

},function(){

$(this).find(".correct").children().removeClass();

$(this).find(".opposite").children().removeClass();

$(this).find(".correct").children().addClass("test2");

$(this).find(".opposite").children().addClass('test');

});

});

图片翻转效果

请我吃烤鱼！

请我吃火锅！

请我吃披萨

请我吃牛排！