Question

所以我有两个并排的面板，可以通过上下按钮滚动。

目前，两个面板同时上下滚动，我需要的是让它们完全独立。

谢谢！

HTML

<div class="wrapper-left">
<div class="news-container">
    <div class="news-content">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>

<a href="#" id="up">Up</a>
<a href="#" id="down">down</a>
</div>
<div class="wrapper-right">
<div class="products-container">
    <div class="products-content">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>
</div>
<a href="#" id="up2">Up</a>
<a href="#" id="down2">down</a>

的Javascript

$(document).ready(function() {
    if ($('.news-content, .products-content').height() > $('.news-container, .products-container').height()) {
        $("#down, #down2").hover(function () {
            animateContent("down");
        }, function() { $('.news-content, .products-content').stop(); });

        $("#up").hover(function () {
            animateContent("up");
        }, function() { $('.news-content, .products-content').stop(); });
    }
});
function animateContent(direction) {  
    var animationOffset = $('.news-container, .products-container').height() - $('.news-content, .products-content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }
    $('.news-content, .products-content').animate({ "marginTop": animationOffset + "px" }, "1500");
}
$('html').on('click','a.up, a.down, a.up2, a.down2',function(event){
event.preventDefault();
});

Answer 1

正如sgroves所说，你在两个div上都有动画。

要解决此问题，您需要将产品与新闻滚动分开滚动。

这是jsfiddle。

$(document).ready(function () {
    bindEvents('news');
    bindEvents('products');
});

function bindEvents(prefix) {
    if ($('.' + prefix + '-content').height() > $('.' + prefix + '-container').height()) {
        $('#' + prefix + '-down').hover(function () {
            animateContent(prefix, 'down');
        }, function () {
            $('.' + prefix + '-content').stop();
        });
        $('#' + prefix + '-up').hover(function () {
            animateContent(prefix, 'up');
        }, function () {
            $('.' + prefix + '-content').stop();
        });
    }
}

function animateContent(prefix, direction) {
    var animationOffset = $('.' + prefix + '-container').height() - $('.' + prefix + '-content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }
    $('.' + prefix + '-content').animate({
        'marginTop': animationOffset + 'px'
    }, '1500');
}

我还修改了你的html：

<div class="wrapper">
    <div class="news-container">
        <div class="news-content">
            <p>Lorem ipsum dolor sit amet,</p>
            <p>Lorem ipsum dolor sit amet,</p>
        </div>
    </div> <a href="#" id="news-up">Up</a>
 <a href="#" id="news-down">down</a>
</div>
<div class="wrapper">
    <div class="products-container">
        <div class="products-content">
            <p>Lorem ipsum dolor sit amet,</p>
            <p>Lorem ipsum dolor sit amet,</p>

        </div>
    </div> <a href="#" id="products-up">Up</a>
 <a href="#" id="products-down">down</a>
</div>

和css：

.wrapper {
    float:left;
    padding: 10px;
}
.news-container, .products-container {
    height: 300px;
    width: 200px;
    background: #ccc;
    padding: 0 10px;
    overflow: hidden;
}
.news-content {
    background:#61DAED;
}
.products-content {
    background:#EDC261;
}
a#news-up, a#news-down {
    color: red;
}
a#products-up, a#products-down {
    color: green;
}

Answer 2

您正在两个div上调用animate：

$('.news-content, .products-content').animate({ "marginTop": animationOffset + "px" }, "1500");

无论你悬停在哪个链接上，这都会为两个div设置动画。您只想一次动画一个div。一种方法是将想要动画的div的类传递给animateContent：

$("#down, #down2").hover(function() {
    var classSelector;

    if (this.id == "down") {
        classSelector= '.news-content';
    } else {
        classSelector= '.products-content';
    }

    animateContent(classSelector, 'down');
}, function() {
    var classSelector;

    // you'll notice this is a bunch of repeated code.
    // perhaps you can find a way to clean it up?
    if (this.id == "down") {
        classSelector = '.news-content';
    } else {
        classSelector = '.products-content';
    }

    $(classSelector).stop();
});

然后在animateContent：

function animateContent(classSelector, direction) {
    // use classSelector in your jQuery selectors here
}

顺便说一下，有很多简单的方法可以做到这一点，但我想提供一个基于现有代码的示例。

如何独立滚动2个不同的面板？

2 个答案: