Toggle zweite Klasse, sobald die erste Klasse abgeschlossen ist?

Um genau zu sein, ich habe:Toggle zweite Klasse, sobald die erste Klasse abgeschlossen ist?

$('.vidsh_sub_btn').on('click', function() { 
 
    $('.vidsub_rld_c').toggleClass('goright'); 
 
    // toggle godown class while goright class is completed moving left to 75px 
 
    $('.vidsub_rld_c').toggleClass('godown'); 
 
    $('.vidsub_rld_c').toggleClass('goleft'); 
 
    $('.vidsub_rld_c').toggleClass('gotop'); 
 
});

.vidsubbtn_c { 
 
    position: absolute; 
 
    height: 34px; 
 
    width: 84px; 
 
    background: black; 
 
    overflow: hidden; 
 
} 
 

 
.vidsub_rld_c { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: white; 
 
    transition: all 700ms; 
 
    left: 0px; 
 
    z-index: 50; 
 
} 
 

 
.vidsub_rld_c.goright { 
 
    left: 75px; 
 
} 
 

 
.vidsub_rld_c.godown { 
 
    top: 25px; 
 
} 
 

 
.vidsub_rld_c.goleft { 
 
    left: 0px; 
 
} 
 

 
.vidsub_rld_c.gotop { 
 
    top: 0px; 
 
} 
 

 
.vidsh_sub_btn { 
 
    position: absolute; 
 
    z-index: 100; 
 
    margin-top: 2px; 
 
    margin-left: 2px; 
 
    height: 30px; 
 
    width: 80px; 
 
    overflow: hidden; 
 
    background: #8495a4; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    border: 0; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vidsubbtn_c"> 
 
    <div class="vidsub_rld_c"></div> 
 
    <input type="button" class="vidsh_sub_btn" value="Add" /> 
 
</div>

Was will ich im Grunde ist, dass vidsub_rld_c einen Kreis der Schaltfläche abschließen sollte, die im Grunde wie ein Laden Objekt aussehen würde.

Aber die Art, die ich in meinem Skript implementiert habe, ist, dass, wenn der Click-Ereignis-Listener aufgerufen wird, alle Umschaltklassen gleichzeitig ausgeführt werden, was den Loader so aussehen lässt, als würde er sich nicht bewegen.

JSFiddle

Quelle

2017-12-16 IAintFixingIt

Sie könnten Schalten Sie eine Klasse um und verwenden Sie CSS-Animationen, um den Effekt zu erstellen.

fiddle

Ein einfaches Beispiel:

$('.vidsh_sub_btn').on('click', function() { 
 
    $('.vidsub_rld_c').toggleClass('animate'); 
 
});

.vidsubbtn_c { 
 
    position: absolute; 
 
    height: 34px; 
 
    width: 84px; 
 
    background: black; 
 
    overflow: hidden; 
 
} 
 

 
.vidsub_rld_c { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: white; 
 
    transition: all 700ms; 
 
    left: 0px; 
 
    z-index: 50; 
 
} 
 

 
.vidsub_rld_c.animate { 
 
    animation: moveAround 1s infinite; 
 
} 
 

 
@keyframes moveAround { 
 
    0% { 
 
    left: 0; 
 
    top: 0; 
 
    } 
 
    25% { 
 
    left: 75px; 
 
    top: 0; 
 
    } 
 
    50% { 
 
    left: 75px; 
 
    top: 25px; 
 
    } 
 
    75% { 
 
    left: 0; 
 
    top: 25px; 
 
    } 
 
    100% { 
 
    left: 0; 
 
    top: 0; 
 
    } 
 
} 
 

 
.vidsh_sub_btn { 
 
    position: absolute; 
 
    z-index: 100; 
 
    margin-top: 2px; 
 
    margin-left: 2px; 
 
    height: 30px; 
 
    width: 80px; 
 
    overflow: hidden; 
 
    background: #8495a4; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    border: 0; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vidsubbtn_c"> 
 
    <div class="vidsub_rld_c"></div> 
 
    <input type="button" class="vidsh_sub_btn" value="Add" /> 
 
</div>

Quelle

2017-12-16 13:02:54 sol

thx, dass ziemlich viel gearbeitet hat. Eine weitere Sache, wenn Sie nur den Loader No-Stop-Kreis den Knopf machen könnte, die viel geschätzt werden wird. Ich probierte 'while (1) $ ('. Vidsub_rld_c'). ToggleClass ('animate');' aber das lässt den Browser nicht mehr reagieren. jetzt nicht wirklich warum. aber thx sowieso. – IAintFixingIt

Ich habe das Snippet aktualisiert - ist das der gewünschte Effekt? – sol

thx du bist das Beste, tt das wird irgendwelche Leistung Probleme machen? – IAintFixingIt

Updated fiddle.

Sie könnten setInterval verwenden den Kreis zu vervollständigen, indem die Klassen kontinuierlich nach jedem Mal 'x' Makeln, wie:

$('.vidsh_sub_btn').on('click', function() { 
    setInterval(function() { 
    $('.vidsub_rld_c').toggleClass('godown'); 
    $('.vidsub_rld_c').toggleClass('goright'); 
    }, 700); 
});

Code:

$('.vidsh_sub_btn').on('click', function() { 
 
    setInterval(function() { 
 
    $('.vidsub_rld_c').toggleClass('godown'); 
 
    $('.vidsub_rld_c').toggleClass('goright'); 
 
    }, 700); 
 
});

.vidsubbtn_c { 
 
    position: absolute; 
 
    height: 34px; 
 
    width: 84px; 
 
    background: black; 
 
    overflow: hidden; 
 
} 
 

 
.vidsub_rld_c { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: white; 
 
    transition: all 700ms; 
 
    left: 0px; 
 
    z-index: 50; 
 
} 
 

 
.vidsub_rld_c.goright { 
 
    left: 75px; 
 
} 
 

 
.vidsub_rld_c.godown { 
 
    top: 25px; 
 
} 
 

 
.vidsh_sub_btn { 
 
    position: absolute; 
 
    z-index: 100; 
 
    margin-top: 2px; 
 
    margin-left: 2px; 
 
    height: 30px; 
 
    width: 80px; 
 
    overflow: hidden; 
 
    background: #8495a4; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    border: 0; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vidsubbtn_c"> 
 
    <div class="vidsub_rld_c"></div> 
 
    <input type="button" class="vidsh_sub_btn" value="Add" /> 
 
</div>

Quelle

2017-12-16 12:56:44

Thx für Ihre Antwort, aber immer noch das schaltet 2 Klassen zur gleichen Zeit, und wenn ich kann können Sie das in einer Schleife hinzufügen, so dass es nur den Knopf umkreisen und nicht aufhören? – IAintFixingIt

Dann suchen Sie nach 'setInterval()' überprüfen Sie mein Update ... –

Sie jQuery UI verwenden könnte, so dass Sie können Kette Klasse schaltet wie:

$('.vidsh_sub_btn').on('click', function() { 
    $('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){ 
     $('.vidsub_rld_c').toggleClass('godown', 2000); 
    }); 
});

https://codepen.io/anon/pen/QajaPm

Quelle

2017-12-16 13:13:26

Toggle zweite Klasse, sobald die erste Klasse abgeschlossen ist?

Antwort

Verwandte Themen