Как изменить непрозрачность изображения в IE? - jQuery, CSS

Question

Следующее работает в FF, Chrome и Safari:

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().fadeTo("slow", 0.30);
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

Но не в IE8 (я даже не тестирую в 7 и более ранних версиях).

Как мне добитьсяэта функция в IE8?

Редактировать : По популярному запросу вот HTML:

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

    <div style="clear:both"></div>

    <div id="edit-image-nav">
        <div id="add_comment"><img src="images/comment-icon.png" /></div>
        <div id="like"><img src="images/paint-icon.png" /></div>
        <div id="delete_img"><img src="images/delete-icon.png" /></div>
    </div>  

Обратите внимание, что происходит, когда вы нажимаете на один иззначки в div 'edit-image-nav' (которые накладываются на изображения в UL выше onHover), он имеет другую функциональность.Для других значков это работает.Однако для #delete_img это не так.

Answer 1

Изображение не может быть родительским (что очень маловероятно), поэтому ваш селектор ошибочен.Трудно сказать, что это должно быть без соответствующего фрагмента HTML, но вы можете попробовать (это сработает, если ваша кнопка удаления будет на два уровня ниже цели, которую нужно удалить):

$(this).parent().parent().find("img").fadeTo("slow", 0.30);

Метод fadeTo на изображении отлично работает с IE8.Если это не сработает, пожалуйста, опубликуйте свой html.

В противном случае убедитесь, что в вашем теге img указаны высота и ширина, в противном случае IE не применит изменение непрозрачности для элемента, так как он «не имеет макета» - для подробногообъяснение см. http://www.satzansatz.de/cssd/onhavinglayout.html.

Answer 2

Это не похоже на ошибку в вашем коде, но если это действительно не работает, попробуйте это:

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().parent().children("img").fadeTo("slow", 0.30, function() {
                   $(this).css('opacity', 0.3);
            } );
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});