0

你好，比我聪明得多的人。

在标题调整大小期间，我已经能够使用 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

动画流畅而干净，如何完成类似的事情让我望而却步。

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

这已经很长了，但是如果有人觉得有必要让我更加尴尬，我可以发布我尝试这样做的所有失败尝试；）

谢谢大家！

泰勒。

4

2 回答 2

1

也许您可以使用 jQueryanimate()而不是 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
            });
        }
    });
});
于 2014-01-28T10:22:25.783 回答
0

我已经解决了我的问题。我会在这里为遇到与我相同的问题的任何人发布结果。

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/

于 2014-01-29T02:02:50.493 回答