Question

因此，我试图通过滑动div来使用一种解决方法从右向左滑动我的文本。当用户向下滚动到div高度并触发滑动时，它应该滑动。

$(document).ready(function() {
    $(window).scroll(function() {
        var top = $(this).scrollTop();
        var aTop = $('.right-slide').height();
        if(top >= aTop){
            $(this).animate({right:'+=100%', opacity:'1'},1000);
        }
    });
});

和css为

.right-slide { 右：-100％; 显示：块; 不透明度：0.5; 位置：相对; }

和html为

<section id="about" class="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>About Me</h2>
                <hr class="small">
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elite. <br> 
                    Morbi nulla est, molestie varius porta non, pharetra </p> 
            </div>
        </div>
        <div class="row spacer">
            <div class="col-lg-4">
                <h3 class="thicker left-slide">Name</h3h3>
                <h4 class="left-slide">Jeremiah Mejia</h4>
                <h3 class="spacer left-slide thicker">Date of Birth</h3>
                <h4 class="left-slide">1 July 1991</h4>
                <h3 class="spacer left-slide thicker">Birth Place</h3>
                <h4 class="left-slide">New Zealand</h4>
            </div>
            <div class="col-lg-4 fade text-center">
                <img src="img/rsz_1dsc_0035.jpg" class="img-circle ">   
            </div>
            <div class="col-lg-4 ">
                <h3 class="thicker right-slide">City</h3>
                <h4 class="right-slide">Auckland, New Zealand</h4>
                <h3 class="spacer right-slide thicker">Email</h3>
                <h4 class="right-slide">fwaswf.fwasd@ymail.com</h4>
                <h3 class="spacer right-slide thicker">Contact Number</h3>
                <h4 class="right-slide">123 145 6789</h4>
            </div>
        </div>
        <div class="row spacer">
            <div class="col-lg-12 text-center">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero nulla, tristique a neque a, pharetra iaculis justo. Duis velit purus, volutpat ac nulla at, dapibus convallis augue. Etiam vitae fringilla erat. Curabitur ornare tristique justo, eget vulputate elit pellentesque ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi molestie mattis turpis vitae lacinia. Mauris viverra odio non purus ornare, non aliquam tellus volutpat. Maecenas feugiat faucibus magna, eu feugiat purus mollis ac. Sed vestibulum ac velit sit amet viverra. Etiam semper laoreet est, vel maximus ligula imperdiet vel. Pellentesque posuere orci magna, eget luctus nulla vulputate ac. Nunc nec eleifend libero, eu consequat velit.
                </p>
                <br>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero nulla, tristique a neque a, pharetra iaculis justo. Duis velit purus, volutpat ac nulla at, dapibus convallis augue. Etiam vitae fringilla erat. Curabitur ornare tristique justo, eget vulputate elit pellentesque ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi molestie mattis turpis vitae lacinia. Mauris viverra odio non purus ornare, non aliquam tellus volutpat. Maecenas feugiat faucibus magna, eu feugiat purus mollis ac. Sed vestibulum ac velit sit amet viverra. Etiam semper laoreet est, vel maximus ligula imperdiet vel. Pellentesque posuere orci magna, eget luctus nulla vulputate ac. Nunc nec eleifend libero, eu consequat velit.
                </p>
            </div>
        </div>
    </div>
    <!-- /.container -->
</section

问题是，为什么我的代码不起作用？另外我应该添加，我使用bootstrap框架。

非常感谢任何帮助

Answer 1

好吧，我不知道这会对任何人有所帮助，但我终于找到了解决方案。我猜的诀窍就是使用一个空的css类

.right-slide { }

和一种占位符类，将用于设置内容的内容，以及＃34;右键滑动＆＃34;类。对我来说，我用了

.place-holder { display：inline-block; margin-left：40％; 不透明度：0.01; }

然后，您指定空的＆＃34; .right-slide＆＃34;将class添加到标题标记中，然后在该标题标记中使用＆＃34; span＆＃34;将使用＆＃34;占位符＆＃34;类。所以看起来应该是这样的

 <h3 class="right-slide"><span class="place-holder">Contact Number</span></h3>

对于javascript，我动画了＃34; marginLeft＆＃34;这有点像这样

$(document).ready(function(){
    $(window).scroll(function(){
        var divs_width = $('.right-slide').width(); 
        var spans_width = $('.place-holder').width();
        var aTop = $('.right-slide').height();
        var right_margin = divs_width - spans_width;
        if($(this).scrollTop()>=aTop){
            $(".place-holder").animate({"marginLeft": "0%", 'opacity': '1'}, "slow");
        }
    });
});

我为每个我选择从右向左滑动的标题标签做了这个。我仍然对Web开发，JQuery和其他东西都不熟悉，但这对我来说是解决方案，并希望它也可以帮助其他人。

达到div高度后，jquery从右到左滑动文本

1 个答案: