在HTML5中創建的JQuery動畫在IE9中工作的boilerplate

我正在開發一個使用HTML5 Boilerplate模板的網站，並使用JQuery創建了鼠標懸停效果。它在IE8，Firefox和Chrome中運行良好。但不是在IE9和IE10中。在這裏找到代碼和工作示例在http://jsfiddle.net/sr77in/TGzsf/2/在HTML5中創建的JQuery動畫在IE9中工作的boilerplate

$(document).ready(function(){ 
$('.infoimg').hover(function(){ 
$('.infodata',this).stop().animate({bottom: '0px'}, 500) 
}, function(){ 
$('.infodata',this).stop().animate({bottom: '-50px'}, 500) 
}) 
});

在此先感謝。

來源

2013-09-26 sr77in

// please paste this code in your blank html and after run this. (working for me) 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>My Document</title> 
<style> 
.destcont { 
    height: 190px; 
    width: 200px; 
    overflow: hidden; 
    margin: 5px 21px 10px 0px; 
    float: left; 
    display: inline-block; 
} 
.infoimg { 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 
.item-arrow { 
    position: absolute; 
    bottom: 15px; 
    right: 15px; 
    z-index: 2002; 
    background: url(../img/arrow-black.png) no-repeat; 
    display: inline-block; 
    width: 11px; 
    height: 18px; 
} 
.infoimg img { 
    position: absolute; 
    z-index: 600; 
} 
.infoimg span.imgtitle { 
    position: absolute; 
    z-index: 700; 
    padding: 10px; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 11px; 
    font-weight: bolder; 
} 
.infoimg span.frotitle { 
    position: absolute; 
    z-index: 701; 
    padding: 10px; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 11px; 
    font-weight: normal; 
} 
.infoimg span.totitle { 
    position: absolute; 
    z-index: 702; 
    padding: 25px 10px; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-weight: bolder; 
} 
.infodata { 
    font: 11px arial; 
    color: #fff; 
    position: absolute; 
    bottom: -50px; 
    width: 100%; 
    text-align: left; 
    background: #97c524; 
    height: 100px; 
    z-index: 1200; 
    padding: 3px; 
} 
.infodata span { 
    display: block; 
} 
.btngroup { 
    margin-top: 20px; 
    display: block; 
    text-align: center; 
} 
.infostrong { 
    font-size: 15px; 
    text-transform: uppercase; 
    font-weight: bolder; 
} 
.infotagline { 
    font-size: 12px; 
    text-transform: uppercase; 
} 
.btngroup input { 
    background: #4d4d4d; 
    color: #ffffff; 
    padding: 10px 20px; 
    border: 0px; 
    margin: 0px 4px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.10.1.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.infoimg').hover(function(){ 
      $('.infodata',this).stop().animate({bottom: '0px'}, 500) 
     }, function(){ 
      $('.infodata',this).stop().animate({bottom: '-50px'}, 500) 
     }); 
    }); 
</script> 
</head> 

<body> 
<div class="destcont"> 
    <div class="infoimg"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRxa-zEPDs_ZBXXs4CzyjKGBP72anROtXaoV0kI1_L2kqAorrs30Q"> 
    <div class="infodata"> <span class="infostrong">sr77in</span> <span class="infotagline">Kerala-Gods own country</span> 
     <div class="btngroup"> 
     <input type="button" value = "CITY GUIDE"> 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2013-09-26 07:00:37

這似乎是我的代碼在jsfiddle .. – sr77in

在HTML5中創建的JQuery動畫在IE9中工作的boilerplate

回答

相關問題