scrollTo внутри Аккордеона

Я очень стараюсь прикрепить свиток к гармошке, но, кажется, если первый работает, последний перестает работать, и наоборот.

Вот чего я хочу достичь,

http://www.ge-energy.com/

и вот мой код, который я написал для этого

http://jsfiddle.net/ztFWv/51/

Что я должен делать?

Источник

2 ответа

Решение

Попробуйте это:

http://jsfiddle.net/Yz9NW/1/

Его собирают довольно быстро, но с некоторыми изменениями он может сделать работу.

Он использует JQuery UI accordian, а также плагин JQuery ScrollTo.

Надеюсь, поможет.

Редактировать (на основе комментариев)

Необходимы некоторые модификации в JavaScript. Вот:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

<script type="text/javascript">
var itemWidth = 400;

$(document).ready(function(){
    $('#container').width($(document).width()-10);
    $("#accordion").accordion({ fillSpace: true });

    $('#accordion> h3').click(function () {
        var index = ($('h3').index(this));
        $('#container').scrollTo((index * itemWidth).toString() + 'px', 800);
    });
});
</script>

<style type="text/css">

#accordion
{
    width:200px;
    font-size:12px;
}

#navigation
{
    position:absolute;
    top:10px;
    left:15px;
    height:300px;
    cursor:pointer;
}

#container
{
    width:600px;
    overflow:hidden;
}

#items
{
    width:2000px;
}

.item
{
    width:400px;
    height:300px;
    float:left;
    background-color:#a9a9a9;
    text-align:left;
}

</style>

</head>

<body>

<div id="navigation">
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc.
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit.
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
    </div>
</div>     
</div>
<div id="container">
    <div id="items">
        <div class="item">
            <img src="http://businesstm.com/wp-content/uploads/2010/02/mlm-downline-building.jpg">
        </div>
        <div class="item">
            <img src="http://www.socalfools.org/wp-content/uploads/2011/04/The-importance-of-advertising-in-the-marketing-business.jpg">
        </div>        
        <div class="item">
            <img src="http://www.rhylbusinessgroup.co.uk/admin/Image/grey_business_group.jpg">         
        </div>        
        <div class="item">
            <img src="http://www.businesscrm.net/wp-content/uploads/2009/07/Sales-Automation.jpg">
        </div>        
        <div class="item">
            <img src="http://www.aworldafilm.com/wp-content/uploads/2011/05/Selecting-the-Right-Online-Business.jpg">
        </div>              
    </div>
</div> 

</body>
</html>
Источник

Похоже, вам нужно .animate() свойство положения фона на элементе select.

 $('#myBackgroundImage').animate({
          backgroundPosition: -4000 /* whatever you want */
    }, 1000, function()
    {
       alert('Animation Complete');
    });
Источник
Другие вопросы по тегам