2013-04-16 7 views
0

У меня есть div, который имеет пролет с текстом «резюме» в нем вместе с маленькой иконкой резюме. У меня есть код jquery, позволяющий пользователю щелкнуть по div, который затем приведет к увеличению размера div и добавлению изображения моего резюме. Мой код работает, но мне кажется немного неряшливым. У меня нет большого опыта работы с jquery, поэтому мне было интересно, хорош ли мой код или есть ли лучший способ его кодирования. Также есть еще один div, точно такой же, как и div div, кроме как с контактом. Когда пользователь расширяет резюме div, контакт div скрыт. В конечном итоге я хотел бы добавить тот же эффект в div контакта, только добавляя форму контакта вместо изображения.Сделать код jquery более чистым и эффективным

$(document).ready(function(){ 
    $(".resume").toggle(function(){ 
     $(".resume").animate({height:700}, "slow"); 
     $(".resume").animate({width:900}, "slow"); 
     $(".rchange, .hide, .con_hide").hide(); 
     $(".resume").prepend('<img id="res_tog" src="img/resume.jpg" />'); 
    }, 
    function(){ 
     $(".resume").animate({height:300}, "slow"); 
     $(".resume").animate({width:460}, "slow"); 
     $(".rchange, .hide, .con_hide").show(); 
     $("#res_tog").remove(); 
    }); 
}); 
+0

Использование '.toggle()' в этом мода устарела. – ahren

ответ

0

Я хотел бы сделать что-то вроде этого, по крайней мере:

var resume = $('.resume'); 

$(document).ready(function(){ 
    resume.toggle(function(){ 
     resume.animate({height:700}, "slow") 
       .animate({width:900}, "slow"); 
     $(".rchange, .hide, .con_hide").hide(); 
     resume.prepend('<img id="res_tog" src="img/resume.jpg" />'); 
    }, 
    function(){ 
     resume.animate({height:300}, "slow") 
       .animate({width:460}, "slow"); 
     $(".rchange, .hide, .con_hide").show(); 
     $("#res_tog").remove(); 
    }); 
}); 
0

Это должно работать и делает его немного более кратким:

$(document).ready(function(){ 
    $(".resume").toggle(
    function(){ 
    $(".resume").animate({height:700, width:900}, "slow").prepend('<img id="res_tog" src="img/resume.jpg" />'); 
    $(".rchange, .hide, .con_hide").hide(); 
    }, 
    function(){ 
    $(".resume").animate({height:300, width:460}, "slow"); 
    $(".rchange, .hide, .con_hide").show(); 
    $("#res_tog").remove(); 
    }); 
}); 
Смежные вопросы