CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
David Debnar
David Debnar

Reputation: 125

Where is the bug in this jQuery code?

I have this code and the part in /**/ has some bug... I can't find it... When I delete that part of the code it works fine.

Problem

Solution

$(window).load(function(){
$('#cTop').toggle(
    function(){
        showC();
    },  
    function() {
        hideC();
    }
);

$('#textDownRight').click(function(){
    window.location = 'http://nitidus-consto.kilu.org';
    hideC();
});

    /* The buggy code starts here */
$('.menuCircle').hover(
    function () {
        $(this).animate({
            width: 55%,
            height: 55%
        }, 250);
    },
    function() {
        $(this).animate({
            width: 50%,
            height: 50%
        }, 250);
    });
    /*it ends here*/
});

function hideC(){
$('#c').animate({
    width: 100,
    height: 100,
    'margin-left': '-50px',
    'margin-top': '-50px'
    },500);
$('#cTop').animate({
    'backgroundColor': 'rgb(25,25,25)'
    }, 500);}

function showC(){
$('#c').animate({
    width: 200,
    height: 200,
    'margin-left': '-100px',
    'margin-top': '-100px'
    },500);
$('#cTop').animate({
    'backgroundColor': 'rgb(50,50,50)'
    }, 500);}

Upvotes: 0

Views: 73

Answers (2)

genesis
genesis

Reputation: 50976

Try this one

http://jsfiddle.net/qHeMD/1/

you're missing quotes around values with percents

    $(this).animate({
        width: 55% ,
        height: 55%
    }, 250);
}, function() {
    $(this).animate({
        width: 50%,
        height: 50%
    }, 250);

should be 

    $(this).animate({
        width: '55 %' ,
        height: '55 %'
    }, 250);
}, function() {
    $(this).animate({
        width: '50 %',
        height: '50 %'
    }, 250);

Upvotes: 6

Chazbot
Chazbot

Reputation: 1890

Try making the percentages strings, like this:

/* The buggy code starts here */
$('.menuCircle').hover(
    function () {
    $(this).animate({
        width: '55%',
        height: '55%'
    }, 250);
},
function() {
    $(this).animate({
        width: '50%',
        height: '50%'
    }, 250);
});
/*it ends here*/
});

Upvotes: 1

Related Questions