Эффект опрокидывания Jquery для адаптивного сайта - PullRequest
Новая
       0

Эффект опрокидывания Jquery для адаптивного сайта

0 голосов
/ 20 декабря 2011

Я пытаюсь разобраться в создании своего сайта, используя новые адаптивные фреймворки. Я провел некоторое тестирование и по стандарту получил эффект, который я использую на не отвечающем веб-сайте, который является опрокидыванием Jquery, где я использую спрайт, чтобы мое изображение было серым / цветным, а при опрокидывании - серым, чтобы затемнить с текстом, который включает и выключает изображение при наведении.

Моя проблема в том, что если я адаптирую это, потому что мои изображения на адаптивном сайте не имеют фиксированной высоты в пикселях, изображение, очевидно, показывает обе серые / цветные стороны изображения. Если я попытаюсь сделать% height & width, очевидно, что это не сработает, поскольку оно уменьшит масштаб, потому что вскоре начинает показывать неправильные части изображения.

Кто-нибудь знает, как я могу обойти это, мне нужен отзывчивый способ создать этот эффект для моих миниатюр. Я приведу пример, чтобы вы могли увидеть, что у меня есть.

Мой Jquery: 

$(document).ready(function() {

    $("a.thumbnail").hover(function() { //On hover...

        var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

        //Set a background image(thumbOver) on the <a> tag 
        $(this).find("div.thumbimg").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
        //Fade the image to 0 
        $(this).find("span").stop().fadeTo('fast', 0 , function() {
            $(this).hide() //Hide the image after fade
        }); 
    } , function() { //on hover out...
        //Fade the image to 1 
        $(this).find("span").stop().fadeTo('slow', 1).show();
    });

});

Я делаю базовые вещи здесь, я не уверен в JQuery. Любые идеи по адаптации этого.

РЕДАКТИРОВАТЬ **: http://www.visualdecree.co.uk/test/index.html - Демонстрирует быструю свернутую страницу тестирования. Надеюсь, поможет вам показать, что я делаю.

С уважением M

...