CODEWITHSUNDEEP
jquery
Stuart McAra
Stuart McAra

Reputation: 1

JQuery: Trouble with hide() and show() slide effect

On my page I've been trying to have one div slide out of view when it's clicked and another to slide in and vice versa. My code is:

$(document).ready(function () {
    'use strict';
    $('#trialForm').hide();

    $('#trialClick').click(function () {
        $(this).hide('slide');
        $('#trialForm').show('slide');
    });

    $('#trialForm').click(function () {
        $(this).hide('slide');
        $('#trialClick').show('slide');
    });

    $('.clickHere form input').click(false);
});

It seems to work pretty much perfectly. One div phases in and the other out, but it's definitely not a slide. Moreover, whichever effect I put in place of 'slide' just produces the same animation. Any advice would be appreciated as I'm completely stumped.

Thanks,

Stuart

Upvotes: 0

Views: 78

Answers (3)

Christoph
Christoph

Reputation: 51181

You should have a look at the signature of the according jQuery methods. If you provide a single string parameter, it's supposed to be a duration keyword. If you want another animation, you need to pass an object instead.

Instead of using show, you perhaps try another jquery effect, which each have their own method like fade() or slide().

Also, nowadays I would prefer doing this with css instead. I did a fiddle a while ago to play with css transitions to create a menu: http://jsfiddle.net/poikl/p2g31147/

Upvotes: 0

Puni
Puni

Reputation: 1294

You cannot pass a string to a hide/show function on single parameter. But you can pass time duration in seconds. Or you can use slide toggle this will give the animation effect.

$(document).ready(function () {
    'use strict';
    $('#trialForm').hide();

    $('#trialClick').click(function () {
        $(this).slideToggle(300);
        $('#trialForm').slideToggle(300);
    });

    $('#trialForm').click(function () {
        $(this).slideToggle(300);
        $('#trialClick').slideToggle(300);
    });

    $('.clickHere form input').click(false);
});

Upvotes: 1

Lapenkov Vladimir
Lapenkov Vladimir

Reputation: 3218

try to use css transitions to make effect work. Example : http://davidwalsh.name/demo/css-slide.php set class to element via $(#elementId).toggleClass("closed")

Upvotes: 0

Related Questions