Jquery Accordion / Scrollto但需要淡入淡出吗?

时间:2011-04-22 04:45:08

标签: jquery jquery-ui fadein fadeout jquery-ui-accordion

我是一名平面设计师,但在jquery方面却不是最精通网络的!这是我目前的困境;我有一系列链接,我想用手风琴打开并在顺序列表中显示图像,滚动导航到点击的链接,并在点击链接时淡入和淡出,这是我发现除了淡入淡出之外: http://jsfiddle.net/Jaybles/6EWAF/

并且有一个显示淡入淡出的链接我使用相同的手风琴我想要将这两种风格结合起来! http://nekudacom.com/martimi/flash.html#

链接是JSFiddle提供的Dutchie432,如果任何人可以帮我实现这两者,或者更好的方式将手风琴放在一起使用scrollto和fading会很棒!

这是我的HTML

  

<dt><a href="#"><h3><span class="redtext">/</span> yaya Photography</h3></a></dt>

<dd style="display: none; opacity: 0;" class="closed"> 

<ul>
   <li> <img src="images/yaya_spacing_white.png" alt="yaya_spacing_white" width="600" height="406" /></li>
    <li><img src="images/yayaspacing_black.png" alt="yayaspacing_black" width="600" height="406" /></li>
    <li><img src="images/yaya_logo.png" alt="yaya_logo" width="601" height="401" /></li>
    <li><img src="images/yaya_typography.png" alt="yaya_typography" width="600" height="402" /></li>
    <li><img src="images/yaya_business_colors.png" alt="yaya_business_colors" width="600" height="403" /></li>
    <li><img src="images/yaya_buscab.png" alt="yaya_buscab" width="600" height="600" /></li>
    <li><img src="images/yaya_papers.png" alt="yaya_papers" width="600" height="400" /></li>
    <li><img src="images/yaya_usb.png" alt="yaya_usb" width="600" height="400" /></li>
    <li><img src="images/yaya_website.png" alt="yaya_website" width="600" height="359" /></li>
    <li><img src="images/yaya_website_home.png" alt="yaya_website_home" width="600" height="360" /></li>
    <li><img src="images/yaya_website_contact.png" alt="yaya_website_contact" width="600" height="360" /></li>
    <li><img src="images/yaya_website_gallery.png" alt="yaya_website_gallery" width="600" height="360" /></li>
    <li><img src="images/yaya_shirts1.jpg" alt="yaya_shirts1" width="600" height="400" /></li>
    </ul>

</dd>

这是jquery脚本

    $(document).ready(function(){
    $("dd:not(dd.open)").hide();
    $("dt a").click(function(){
        if ($("dd:not:visible") .get()[0] !== $(this).parent().next().get()[0]) {           
            $("dd").fadeTo("fast", 0);
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("def");
            $(this).parent().next().fadeTo("def", 1);
        }
        return true;
    });

1 个答案:

答案 0 :(得分:0)

使用change: function(event, ui) { ...}changestart: function(event, ui) { ...} 定义打开手风琴时会发生什么。 ui.newContent`是一个带有新打开的内容元素的jQuery对象 请参阅完整文档here(事件选项卡)