Выйдите из функции и снова заработайте функцию

У меня есть несколько изображений, и я хочу, чтобы они масштабировались и меняли положение при нажатии (эта часть работает).
Затем я хочу, чтобы они уменьшались и возвращались в исходное положение при повторном нажатии (работает), если я нажимаю кнопку «закрыть» (частично работает - кнопка «закрыть» не исчезает при первом нажатии), или если я щелкните в любом месте экрана (не знаете, как).Выйдите из функции и снова заработайте функцию

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

Любая помощь будет оценена!

JQuery:

$(document).ready(function(){ 

    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 


    $(itemImages).click(function(){ 
     $(this).addClass("scaled"); 
     $(itemImages).addClass("blur"); 
     $(this).removeClass("blur"); 
     $(itemImages).off('click'); 
     $('.close').fadeIn('slow'); 
     $(this).on('click',itemClicked); 

    }); 
    $('.close').click(function(){ 
     $(itemImages).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     $(itemImages).on('click'); 
     $(this).fadeOut('fast'); 
    }); 

    function itemClicked() { 
     $(this).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     $(itemImages).on('click'); 
    } 
});

CSS:

.blur { 
    -webkit-filter: blur(5px); 
    transition: .5s -webkit-filter linear; 
} 
.scaled { 
    -webkit-transform: scale(2.2); 
    left: 1300px; 
    top: 500px; 
    z-index: 3; 
} 
.close { 
    width: 86px; 
    height:86px; 
    background: url(../images/icons.png) top left; 
    position: absolute; 
    right: 40px; 
    top: 40px; 
    display: none; 
} 
#items img { 
    position: absolute; 
    transition: all .2s ease-out; 
} 
.foo { 
    left: 94px; 
    top: 133px; 
    width: 275px; 
    height: auto; 
} 
.bar { 
    left: 537px; 
    top: 63px; 
    width: 317px; 
    height: auto; 
} 
.foobar { 
    left: 958px; 
    top: 86px; 
    width: 432px; 
    height: auto; 
} 
.barfoo { 
    left: 1556px; 
    top: 77px; 
    width: 270px; 
    height: auto; 
}

Html:

<section id="items" class="fullscreen"> 
    <div class="close"></div> 
    <img class="foo" src="items/image1.png"> 
    <img class="bar" src="items/image2.png"> 
    <img class="foobar" src="items/image3.png"> 
    <img class="barfoo" src="items/image4.png"> 
</section>

источник

2015-10-13 kaTon

I Здесь вы создали свой JSFiddle: http://jsfiddle.net/0pdb84jb/ –

Хмм - скрипка нет t, работая – kaTon

Вы можете сделать что-то вроде

$(document).ready(function() { 
 

 
    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 
 

 

 
    itemImages.click(function() { 
 
    if ($(this).hasClass('blur')) { 
 
     return; 
 
    } 
 
    if ($(this).hasClass('scaled')) { 
 
     reset(); 
 
     return; 
 
    } 
 

 
    $(this).addClass("scaled"); 
 
    itemImages.not(this).addClass("blur"); 
 
    $(this).removeClass("blur"); 
 
    $('.close').fadeIn('slow'); 
 
    }); 
 
    $('.close').click(reset); 
 

 
    function reset() { 
 
    itemImages.removeClass("scaled blur"); 
 
    $('.close').fadeOut('fast'); 
 
    } 
 
});

.blur { 
 
    -webkit-filter: blur(5px); 
 
    transition: .5s -webkit-filter linear; 
 
} 
 
.scaled { 
 
    -webkit-transform: scale(2.2); 
 
    left: 1300px; 
 
    top: 500px; 
 
    z-index: 3; 
 
} 
 
.close { 
 
    width: 86px; 
 
    height: 86px; 
 
    background: url(../images/icons.png) top left; 
 
    position: absolute; 
 
    right: 40px; 
 
    top: 40px; 
 
    display: none; 
 
} 
 
#items img { 
 
    position: absolute; 
 
    transition: all .2s ease-out; 
 
} 
 
.foo { 
 
    left: 94px; 
 
    top: 133px; 
 
    width: 275px; 
 
    height: auto; 
 
} 
 
.bar { 
 
    left: 537px; 
 
    top: 63px; 
 
    width: 317px; 
 
    height: auto; 
 
} 
 
.foobar { 
 
    left: 958px; 
 
    top: 86px; 
 
    width: 432px; 
 
    height: auto; 
 
} 
 
.barfoo { 
 
    left: 1556px; 
 
    top: 77px; 
 
    width: 270px; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="items" class="fullscreen"> 
 
    <div class="close"></div> 
 
    <img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg"> 
 
    <img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg"> 
 
    <img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg"> 
 
    <img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg"> 
 
</section>

источник

2015-10-13 06:53:36

Отлично! Это работает! Единственная проблема заключается в том, что изображение теряет более высокий z-индекс до того, как он масштабируется и переходит в исходное положение (сдвигается под другими изображениями). Знаете ли вы способ, чтобы он поддерживал более высокий индекс z до тех пор, пока он не появится на своем месте? – kaTon

@kaВы можете использовать обработчик события конца перехода –

Хорошо - большое вам спасибо! Я очень благодарен за ваши ответы! – kaTon

вы должны повторно связать событие щелчка, чтобы не использовать on:

$(document).ready(function(){ 

    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 

    var setClick = function(){ 
     $(itemImages).click(function(){ 
      $(this).addClass("scaled"); 
      $(itemImages).addClass("blur"); 
      $(this).removeClass("blur"); 
      $(itemImages).off('click'); 
      $('.close').fadeIn('slow'); 
      $(this).on('click',itemClicked); 
     }); 
    } 
    $('.close').click(function(){ 
     $(itemImages).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     setClick(); 
     $(this).fadeOut('fast'); 
    }); 

    function itemClicked() { 
     $(this).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     $(itemImages).on('click'); 
    } 
});

источник

2015-10-13 06:49:00 MoLow

Проблема в том, что $().on(); не работает вот так: $(itemImages).on('click');. Я думаю, вы пытаетесь изменить заявление $(itemImages).off('click');. Вам необходимо передать обработчик события, который должен быть присоединен к функции on или снова использовать функцию click. Таким образом, самый простой способ определить обработчик события в отдельную функцию и установите ее снова:

$(document).ready(function() { 
 

 
    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 
 

 

 
    $(itemImages).click(itemImages_click); 
 
    $('.close').click(function() { 
 
     $(itemImages).removeClass("scaled"); 
 
     $(itemImages).removeClass("blur"); 
 
     $(itemImages).on('click'); 
 
     $(this).fadeOut('fast'); 
 
    }); 
 

 
    function itemClicked() { 
 
     $(this).removeClass("scaled"); 
 
     $(itemImages).removeClass("blur"); 
 
     $(itemImages).click(itemImages_click); 
 
    } 
 
    
 
    function itemImages_click(e) { 
 
    $(this).addClass("scaled"); 
 
    $(itemImages).addClass("blur"); 
 
    $(this).removeClass("blur"); 
 
    $(itemImages).off('click'); 
 
    $('.close').fadeIn('slow'); 
 
    $(this).on('click', itemClicked); 
 
}; 
 
});

.blur { 
 
     -webkit-filter: blur(5px); 
 
     transition: .5s -webkit-filter linear; 
 
    } 
 
    .scaled { 
 
     -webkit-transform: scale(2.2); 
 
     left: 1300px; 
 
     top: 500px; 
 
     z-index: 3; 
 
    } 
 
    .close { 
 
     width: 86px; 
 
     height:86px; 
 
     background: url(../images/icons.png) top left; 
 
     position: absolute; 
 
     right: 40px; 
 
     top: 40px; 
 
     display: none; 
 
    } 
 
    #items img { 
 
     position: absolute; 
 
     transition: all .2s ease-out; 
 
    } 
 
    .foo { 
 
     left: 94px; 
 
     top: 133px; 
 
     width: 275px; 
 
     height: auto; 
 
    } 
 
    .bar { 
 
     left: 537px; 
 
     top: 63px; 
 
     width: 317px; 
 
     height: auto; 
 
    } 
 
    .foobar { 
 
     left: 958px; 
 
     top: 86px; 
 
     width: 432px; 
 
     height: auto; 
 
    } 
 
    .barfoo { 
 
     left: 1556px; 
 
     top: 77px; 
 
     width: 270px; 
 
     height: auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="items" class="fullscreen"> 
 
    <div class="close"></div> 
 
    <img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg"> 
 
    <img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg"> 
 
    <img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg"> 
 
    <img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg"> 
 
</section>

источник

2015-10-13 06:50:44 Markai

, если я щелкнув в любом месте экрана, это все еще отсутствует. –

Выйдите из функции и снова заработайте функцию

ответ

Смежные вопросы