0
私はanimate要素の上部とフェードアウト効果を使用したい
は一緒にここにjQueryのアニメーションやフェード効果は一緒
$('.img-animate-cont').mouseover(function(){
$(".text-anim").fadeIn({queue: false, duration: 400});
$(this).find(".text-anim").stop().animate({top:"200px"},400);
});
$('.img-animate-cont').mouseout(function(){
$(".text-anim").fadeOut({queue: false, duration: 400});
$(".text-anim").stop().animate({ top: "0" }, 400);
は、私は私のテキスト・アニメーション・センターのdivがpostionedすることにしたいHTML
<section class="container" id="fourth">
<h2 class="text-center">Latest Products</h2>
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<a href="#" class="imgLink">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive">
</div></a>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
<a href="#" class="imgLink" id="imgLinkTop1">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive">
</div></a>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
</div>
ですフェード効果を持つ私のイメージの上、あなたが不透明背景
<div class="col-sm-6 col-md-3 col-lg-3">
<a href="#" class="imgLink">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;">
<button type="button" class="btn btn-primary btn-md"><span class=""></span>Add to Cart</button>
<br><br><button type="button" class="btn btn-primary btn-md">Quick View</button>
</div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive">
</div></a>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
<a href="#" class="imgLink" id="imgLinkTop2">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive">
</div></a>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<a href="#" class="imgLink" id="imgLinkTop3">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-md><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive">
</div>
</a>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
<a href="#" class="imgLink" id="imgLinkTop4">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-md><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive">
</div></a>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<a href="#" class="imgLink">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-md><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"></a>
</div>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
<a href="#" class="imgLink" id="imgLinkTop5">
<div class="img-animate-cont">
<div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div>
<img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"></a>
</div>
<h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>
</div>
</div>
<div class="row">
<div id="seeAll"><button type="button">See All Products</button></div>
</div>
</section>
-
を助けることができれば210
- 私は私のテキスト・アニメーション・センターのdivをフェード効果で自分の画像にpostionedすることが、あなたが不透明背景