带水平滚动的jQuery文本不透明度



我不太明白为什么这不起作用。我有一些介绍图像的文本在它的右边。当用户滚动查看图像时,我希望文本逐渐消失。我看到过很多使用相同代码的垂直文本褪色的例子,但出于某种原因,这对我不起作用。有人看到我做错了什么吗?我有以下javascript代码:

<script>
    $(document).bind("projectLoadComplete", function(){
        if ($(".project_intro")[0]){
            var divs = $('.project_intro');
            $(window).bind('scroll', function () {
                var st = $(this).scrollLeft();
                divs.css({ 'opacity' : (1 - st/250) });
                if (divs.css('opacity') < 0) {
                    divs.css('opacity', 0);
                }
            });
        }
    });
</script>

以及以下HTML代码:

<div class="project_intro">This is some intro text that I want to fade when the user scrolls left.</div>
<table height="100%" style="height: 100%; margin-left: 300px;" valign="middle">
    <tr>
        <td>{image 1}</td>
        <td>{image 2}</td>
    </tr>
</table>

我在http://jsfiddle.net/5xQb3/6/

在我将bind('projectLoadComplete ')替换为document.ready()后,它对我有效。你确定你的projectLoadComplete事件正在启动吗?

Don't go for the hardest thing dude.
Use fadeOut jquery method...
fadeOut('Ur time in milliseconds without quotes')
$(document).ready(function(){
    if ($(".project_intro")[0]){
        var divs = $('.project_intro');
        $(window).bind('scroll', function () {
            var st = $(this).scrollLeft();
           $('.project_intro').fadeOut(5000);
        });
    }
});

演示

最新更新