Jquery children () прозрачность анимации

Я сделал простой пример того, как это можно сделать, но сначала поговорим о кодировании.

Когда вы вводите код, попробуйте сделать небольшие управляемые - и читаемые - куски и структурируйте его так, чтобы это имело смысл, и для любви Бога комментарий о том, что вы делаете, или вы вернетесь, почесывая голову, спрашивая "что это снова?".
Если вы это сделаете, будет гораздо легче отладить, когда что-то пойдет не так.

Теперь поговорим о некоторых незначительных проблемах.
При использовании JQuery рекомендуется использовать $(document).ready(function(){...}); как ваша точка входа.

.bind давно устарел, даже его преемник .live уже давно устарел, вы должны использовать .on, но нам действительно нужно использовать его, если содержимое было добавлено динамически в DOM после .ready.

Фу, хорошо, теперь, когда об этом позаботились, вот мой простой пример, чтобы вы пошли в правильном направлении.

Пример | Код

Javascript

var scale_increase = 1.5,
image_fade = 500,
txt_fade = 250;

$(document).ready(function(){
    //Attach click event handler
    $(".img-container").click(function(){
        var self = $(this);

        var img = $("img", this),
            txt = $(".img-text", this);

        //Make sure we aren't animating, otherwise the image resizing will not match
        if(img.is(":animated") || txt.is(":animated")) return;

        if(self.hasClass("img-displaying")){
            //Revert back to default state
            self.removeClass("img-displaying");

            //Hide the text
            txt.animate({
                opacity: 0
            }, txt_fade, function(){
                //After the text has been hidden, make the image smaller
                img.animate({
                    width: parseInt(img.prop("width"))/scale_increase,
                    height: parseInt(img.prop("height"))/scale_increase
                }, image_fade);
            });
        }else{
            //Make picture larger and show the text
            self.addClass("img-displaying");

            //Make the image bigger
            img.animate({
                width: parseInt(img.prop("width"))*scale_increase,
                height: parseInt(img.prop("height"))*scale_increase
            }, image_fade, function(){
                //After it grown, show the text
                txt.animate({
                    opacity: 1
                }, txt_fade);
            });
        }
    });
 });

HTML

<div class='img-container'>
    <img src="http://images.wisegeek.com/young-calico-cat.jpg" width="200" height="156" />
    <div class='img-text'> This is a cute kitty I want to cuddle with! :)</div>
</div>

<div class='img-container'>
    <img src="http://images.wisegeek.com/young-kittens.jpg" width="200" height="148" />
    <div class='img-text'> Oh dear, they're SO adorable!</div>
</div>

CSS

.img-text{
    text-align: left;
    font-style: italic;
    opacity: 0;
    width: 100%;
}

Ссылки (в порядке появления)

• $(document).ready(function(){...});
• .click(...)
• .is(...)
• :animated селектор
• .hasClass(...)
• .removeClass(...)
• .animate(...)
• .prop(...)
• .addClass(...)