1

マウスが画像の上にある場合にのみ .gif ファイルを実行する方法は?

デモ: http://jsfiddle.net/pHcXa/

<html>
<body>

<div id="img_wrap" class="static">

   <img id="animated" src="database.gif">
   <img id="static" src="database.png">

<script type="text/javascript">


  $(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');

    })
})
</script>

</body>
</html>
4

5 に答える 5

3

または、これを行うためにcssを使用できます

フィドル: http://jsfiddle.net/parslook/pHcXa/3/

CSS

body {
    background-color:#282828;
}


.image {
    background: url(http://swish.wodip.opole.pl/forum/files/thumbs/t_spirala_157.png);
    width:300px;
    height:310px;
    background-size:300px;
}

.image:hover {
    background: url(http://www.laboiteverte.fr/wp-content/uploads/2010/10/gif-psychedelique-hypnose-animation-11.gif);
    width:300px;
    height:310px;
    background-size:300px;
}

html

<div class="image">

</div>
于 2013-09-12T14:48:39.893 に答える
2

デモ

$(function () {
    $('#img_wrap').on('hover', function () {
        $(this).toggleClass('animated').toggleClass('static');
    }, function () {
        $(this).toggleClass('animated').toggleClass('static');
    });
});

.hover()

于 2013-09-12T14:41:17.583 に答える
0

プリロードとしてgifをdisplay noneにロードしたままにして、マウスオーバーでimgソースを変更して、gifが最初から開始されるようにします(ループしていないものを表示する場合など)

http://jsfiddle.net/pHcXa/2/

$('#static').on('mouseover', function() {
     this.src ='http://www.laboiteverte.fr/wp-content/uploads/2010/10/gif-psychedelique-hypnose-animation-11.gif';
})
$('#static').on( 'mouseout', function() {
     this.src ='http://swish.wodip.opole.pl/forum/files/thumbs/t_spirala_157.png';
})
于 2013-09-12T14:46:17.643 に答える
0

試してみてください：

$('#animated').hide();
var toggleImages = function(){
  $('#animated, #static').toggle();
};
$('#img_wrap').on('hover', toggleImages, toggleImages);
于 2013-09-12T14:45:48.713 に答える