Question

我在放大镜上做了动画以继续前进，但我没有冲突，我不知道为什么它不起作用。

http://www.kirstymarks.com/

请参阅下面的代码： -

$(document).ready(function() {
$('#ie8 .image-info').css( 'opacity', '0' );
    if ( $('#ie8 .image-info').length ){
            $('.entry-image').hover( function(){
                $(this).find('.image-info').css( 'opacity', '1' );
            }, function(){
                $(this).find('.image-info').css( 'opacity', '0' );
            } );
        };
});
$('.thumbnailwrap .readmore').hover(
            function(){
                $(this).find('span').stop(true,true).animate( { 'top' : '-24px', 'opacity' : '0' }, 150, function(){
                    $(this).css( { 'top' : '86px' } ).animate( { 'top' : '9px', 'opacity' : '1' }, 150 );
                } );
            }, function(){
                $(this).find('span').css( { 'top' : '9px', 'opacity' : '1' } ).stop(true,true).animate( { 'top' : '46px', 'opacity' : '0' }, 150, function(){
                    $(this).css( { 'top' : '-24px', 'opacity' : '1' } ).animate( { 'top' : '9px' }, 150 );
                } );
            }
        );

指针很受欢迎，我不想要答案，我很乐意教育自己上面的错误。

我想重新创建的例子是： -

http://elegantthemes.com/preview/Origin/

Answer 1

谢谢你在JS Chat的Connor找到答案。这就是我想要的： -

$(function() {
$('.readmore').hover(function() {
    $('span').stop().animate({
        top: '-24px',
        opacity: 0
    }, 150, function() {
        $(this).css({
            top: '86px'
        }).animate({
            top: '9px',
            opacity: 1
        }, 150);
    });    
}, function() {
    $(this).find('span').css({
        top: '9px',
        opacity: 1
    }).stop().animate({
        top: '46px',
        opacity: 0
    }, 150, function() {
        $(this).css({
            top: '-24px',
            opacity: 1
        }).animate({
            top: '9px'
        }, 150);
    });
});
});

示例： -

http://jsfiddle.net/rusticblonde/T9Gw7/25/

Answer 2

您的hover功能需要在$(document).ready功能中。

查看我的JsFiddle。

我已经制作了另一个jsFiddle来向您显示同样的内容，但使用.animate代替.css（即使它与问题完全无关）。

放大镜上的动画与Jquery

2 个答案: