jQuery dia-animatie wisselen

Ik heb aangepaste toggle-diapresentatie gemaakt. Het werkt prima zoals verwacht, maar het verschuift niet bij de eerste klik. als u op de kaartpijl klikt, ziet u dat de toggle-klasse erop van toepassing is, maar de kaart zal niet schuiven. maar als je nog twee keer klikt, dan zal het schuiven.

Ik ben vrij nieuw voor jQuery en ik heb er ook veel naar gezocht, maar niets heeft een oplossing gevonden. Hier is de code;

$('.map_btn').click(function() {
    $('.map_btn').toggleClass('toggle');

    $('.map_btn').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 1,
            height: 420
        });
    });
    $('.map_btn.toggle').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 0,
            height: 0
        });
    });
});

http://jsfiddle.net/h2fh6/

4
toegevoegd bewerkt
Bekeken: 2
de bron
Waarom stel je de $. Aan() methode in na de klik? Dat is een setter alleen bij die eerste brand. Dat is jouw probleem. Verplaats ze uit de eerste $. Klik() .
toegevoegd de auteur Jared Farrish, de bron

5 antwoord

Tenzij je de les nodig had voor iets anders, gebruik je gewoon .toggle() .

$('.map_btn').toggle(function() {
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

Ik denk echt dat ze deze functie toggleClick hadden moeten noemen.

3
toegevoegd
de bron
bedankt dat het nu werkt.
toegevoegd de auteur Umair Razzaq, de bron
nee het verandert het pictogram op klik.
toegevoegd de auteur Umair Razzaq, de bron
@ user1398384: Ik denk dat dit de pictogramanimaties niet zal veranderen (blauwe pijl -> grijze pijl op toggle). zie mijn antwoord met deze werking.
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
Ik ben geen grote fan van het requesterium in de handlers.
toegevoegd de auteur Jared Farrish, de bron
@ user1398384 - Hiermee wordt de klasse .toggle niet op de knop omgeschakeld, althans niet in mijn Firefox: jsfiddle.net/userdude/h2fh6/23
toegevoegd de auteur Jared Farrish, de bron
@ user1398384 Vergeet niet om te stemmen en te accepteren, bedankt!
toegevoegd de auteur iambriansreed, de bron

Je kunt dit proberen

$('.map_btn').toggle(function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 1,
    height: 420
});
},function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 0,
    height: 0
});
});​
1
toegevoegd
de bron
Elke keer dat er een vuurt, verzend je twee nieuwe query's bovenop die waarvoor je de handlers moet instellen. Opslaan, hergebruiken, private scope boven het gebruik (zie mijn antwoord en hoe ik de cache win voor een voorbeeld de $. Load() afsluiting).
toegevoegd de auteur Jared Farrish, de bron

De onderstaande code zou moeten werken met uw pictogramanimaties!

http://jsfiddle.net/epinapala/h2fh6/19/ 

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

​

0
toegevoegd
de bron

Hier is mijn mening over, met caching van de selectors die worden opgeroepen (en de voor de hand liggende sluitingsscope, daarom zet ik het $ (venster) .load (); daar), je hebt betere algehele prestaties.

Je moet cachen als je aan het animeren bent. U moet. Animeer niet steeds opnieuw op een opnieuw geselecteerde jQuery-objectoproep zoals $ ('. Map_wrapper'). Stop (). Anim() . Het is inefficiënt en moet alleen worden uitgevoerd wanneer dat nodig is, zoals wanneer de DOM is gewijzigd en de huidige status moet worden gevonden.

Mijn benadering schakelt de variabele effect gewoon in met nieuwe instellingen als de .toggle zich op de knop bevindt. Eenvoudig, betrouwbaar. Er lijkt soms een lichte vertraging te zijn als het iframe wordt geladen vanuit Google Maps. Dat kan onvermijdelijk zijn in de jsFiddle-omgeving.

$(window).load(function(){
    var $mapbtn = $('.map_btn'),
        $wrapper = $('.map_wrapper');

    $mapbtn.click(function() {
        var $this = $(this),
            effect = { opacity: 0, height: 0 };

        $this.toggleClass('toggle');

        if ($this.is('.toggle')) {
            effect.opacity = 1;
            effect.height = 420;
        }

        $wrapper.stop().animate(effect);
    });
});

http://jsfiddle.net/userdude/h2fh6/21/

0
toegevoegd
de bron

Het probleem met je huidige oplossing is dat de klassen ergens in de toggleClass() in de war raken en ook het feit dat je een klik handler voor hebt genest .map_btn binnen een andere klik -handler voor hetzelfde element.

De stroom raakt daardoor een beetje in de war.

Je kunt dit proberen,

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
}, function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});​

Gebruik alleen de .toggle() , zodat u niet 2 afzonderlijke methoden hoeft te schrijven.

Fiddle link - http://jsfiddle.net/h2fh6/20/

U kunt hier meer lezen over het wisselen van

0
toegevoegd
de bron
bedankt voor je hulp. Ik heb heel veel geleerd, bedankt
toegevoegd de auteur Umair Razzaq, de bron
Dat is geweldig. Goed om te horen :-) Accepteer alstublieft elk antwoord dat heeft geholpen om uw vraag te beantwoorden. Zal mensen aanmoedigen om je in de toekomst te helpen. Het is hoe SO werkt :-)
toegevoegd de auteur ta-run, de bron