jQuery Text Opacity with Horizo​​ntal Scroll

时间:2013-08-17 03:21:37

标签: jquery css scroll fade horizontal-scrolling

我无法弄清楚为什么这不起作用。我有一些文字在它的右边介绍图像。当用户滚动查看图像时,我希望文本逐渐消失。我已经看到很多使用相同代码的垂直文本淡出的例子,但由于某种原因,这对我不起作用。有人看到我做错了吗?我有以下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>

2 个答案:

答案 0 :(得分:0)

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

为你做了一个jsfiddle

在我将bind('projectLoadComplete ')替换为document.ready()之后,它对我有用吗?你确定你的projectLoadComplete事件正在被解雇吗?

答案 1 :(得分:0)

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);
        });
    }
});

Demo