Question

你好，比我更聪明的人。

我已经能够在头文件中使用jQuery和CSS调整几种不同的方式进行图像交换。我目前正在使用以下代码调整标题大小：

jQuery(document).on('scroll',function(){
    if(jQuery(document).scrollTop()>50){ 
        jQuery('header').removeClass('site-header').addClass('sticky');
    }
    else{
        jQuery('header').removeClass('sticky').addClass('site-header');

    }
});

完美无缺，我已经能够将其他所有内容排序（菜单等）

我遇到麻烦的时候，让图像交换之间的过渡看起来很漂亮。

我尝试过使用这里的示例：JS/jQuery swap image on scroll event并且效果很棒，除了图像交换立即发生并且我已经尝试了几个小时和几个小时使它们褪色，或者滑到左侧和顶部，或使用CSS类来改变不透明度和显示：隐藏/阻止转换（但它使用css闪烁），或以其他方式使用某种方式进行动画处理。

但是，唉，我失败了，我发现除了寻求帮助之外我别无其他选择。

我真正想做的是模仿：http://www.joomlashine.com/joomla-templates.html

动画是流畅而干净的，如何完成这样的事情就是在逃避我。

我需要更多的声望才能将网址发布到我正在使用的图片上，但如果有帮助我可以通过电子邮件发送给他们，或者以其他方式将它们发送给你们。

这已经荒谬了很长时间，但是如果有人觉得有必要进一步让我难堪，我可以发布我尝试做的所有失败的尝试;）

提前谢谢大家！

泰勒。

Answer 1

也许你可以使用jQuery animate()而不是CSS transition。像这样：

http://jsfiddle.net/743fs/1/

$(function () {
    $(document).on('scroll', function () {
        if ($(document).scrollTop() >= 50) {
            $('header').stop().animate({
                height: 20
            }).find('img').stop().animate({
                height: 8
            });
        } else {
            $('header').stop().animate({
                height: 80
            }).find('img').stop().animate({
                height: 60
            });
        }
    });
});

Answer 2

我已经解决了我的问题。我会在这里发布结果给遇到同样问题的人。

HTML：

<div class="container">
<header class="static">
    <a href="#" class="image">
        <img src="http://placehold.it/243x52" class="large" />
        <img src="http://placehold.it/138x38" class="small close" />
    </a>
</header>

jQuery的：

jQuery(document).on('scroll',function(){
    if(jQuery(document).scrollTop()>50){ 
        jQuery('header').removeClass('static').addClass('sticky');
        jQuery('.large').addClass('close');
        jQuery('.small').removeClass('close');
    }
    else{
        jQuery('header').removeClass('sticky').addClass('static');
        jQuery('.small').addClass('close');
        jQuery('.large').removeClass('close');
    }
});

CSS：

.container{
height:750px;
background:#eee;
}
header{
width: 100%;
background: #fff;
position:fixed;
top:0;
box-shadow:0 0 5px rgba(0,0,0,0.3);
transition: all 0.2s ease-in-out;
}
header.static{
height: 90px;
}
header.sticky{
height: 50px;
background: #fff;
}
.large,.small{
transition: all 0.4s ease-in-out;
position:absolute;
left:0;
}
.large{
top:15px;
width:243px;
height:52px;
}
.small{
top:5px;
width:138px;
height:38px;
}
.close {
width:0;
height:0;
opacity:0;
}

这是小提琴http://jsfiddle.net/7V6H3/7/

在标题大小调整期间动画图像交换

2 个答案: