jQuery属性自动切换

Question

我正在尝试使用setTimeout函数来切换svg动画属性。当我在setTimeout函数中添加"jQuery('#animation2').attr('xlink:href'，'#core_type');“时，部分动画工作，但当我添加变量时，它什么也不做。代码如下：

    var AttributeOne = jQuery('#animation2').attr('xlink:href', '#core_type');
    var AttributeTwo = jQuery('#animation1').attr('xlink:href', '#core_type');
    var AttributeSwitch = AttributeOne;
    (function theLoop (i) {
        if(AttributeSwitch == AttributeOne) {
        AttributeSwitch = AttributeTwo;  
        } else {
            AttributeSwitch = AttributeOne; 
        }
        setTimeout(function () {
            AttributeSwitch
        if (--i) {          
          theLoop(i);       
        }
      }, 6000);
    })(100);

Answer 1

试试这个演示，它几乎就是你想要的。将您自己的CSS添加到其中。

HTML：

<div id="tabs">
<ul class="tabs" id="tabsnav">
    <li><a href="#tab-1" class="menu-internal">Tab 1</a></li>
    <li><a href="#tab-2" class="menu-internal">Tab 2</a></li>
    <li><a href="#tab-3" class="menu-internal">Tab 3</a></li>
    <li><a href="#tab-4" class="menu-internal">Tab 4</a></li>
</ul>

<div id="tab-1">
    Contents for tab 1
</div>
<div id="tab-2">
    Contents for tab 2 
</div>
<div id="tab-3">
    Contents for tab 3
</div>
<div id="tab-4">
    Contents for tab 4  
</div>
</div>

JAVASCRIPT：

jQuery(document).ready(function () {
    jQuery("#tabs > div").hide(); // hide all child divs
    jQuery("#tabs div:first").show(); // show first child div
    jQuery("#tabsnav li:first").addClass("active");

    jQuery(".menu-internal").click(function () {
        jQuery("#tabsnav li").removeClass("active");
        var currentTab = jQuery(this).attr("href");
        jQuery('#tabsnav li a[href="' + currentTab + '"]')
            .parent()
            .addClass("active");
        jQuery("#tabs > div").hide();
        jQuery(currentTab).show();
        return false;
    });
    // Create a bookmarkable tab link
    hash = window.location.hash;
    elements = jQuery('a[href="' + hash + '"]'); // look for tabs that match the hash
    if (elements.length === 0) {
        // if there aren't any, then
        jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
    } else {
        elements.click();
    } // else, open the tab in the hash
});