jQuery - fadeTo () - как мне заставить его исчезать все больше и больше при каждом вызове события?

Question

jQuery - fadeTo () - как мне заставить его исчезать все больше и больше при каждом вызове события?

0

Я пытаюсь написать сценарий, который сначала уменьшит изображение до 80%, затем 60% и т.д. Вплоть до 1%, но когда я вызываю событие (.click), все, что я получаю, сделку, где она идет к моей установленной непрозрачности. как я могу продолжать? заранее спасибо. вот мой код:

<html>
<center><img 

src="image1.jpg"
id="1"><br><img src="image2.jpg" 

width="500" height-"500" id="2" ></img></center>

</html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>


$(document).ready(function() {

   $("#2").click(function() {

      $("#1").fadeTo(500,.3);


   });

});

</script>

user3342341 23 фев. 2014, в 06:20

Источник

Теги:

javascript

jquery

css

4 ответа

2

Это должно сделать трюк.

$(document).ready(function() {
   $("#2").click(function() {
      if($("#1").css("opacity")>.2) {
        $("#1").fadeTo(500,$("#1").css("opacity")-.2);
      } else {
        $("#1").fadeTo(500, .01);
        $("#2").unbind("click");
      }
   });
});

s.alem 23 фев. 2014, в 03:00

0

Это не остановится на 1%, как описано в соответствии с его требованием.
ltalhouarne 23 фев. 2014, в 04:58
0

Проверьте мою правку ...
s.alem 23 фев. 2014, в 05:04

1

Либо отслеживайте текущую непрозрачность с помощью переменной, либо получаете текущую непрозрачность с помощью jquery, например var opacity = $ ('elemFoo'). Css ('opacity');

затем уменьшите opacityby желаемого уровня.

var opacity= $('elemFoo').css('opacity');
if(opacity > 0.2){
  $('elemFoo').faceTo(opacity - 0.2);
}

QBM5 23 фев. 2014, в 01:46

0

Что-то вроде этого:

var opacity = 1;

$("#2").click(function() {
    opacity = opacity * .75;

    $("#1").fadeTo(500, opacity);
});

Это уменьшит непрозрачность на 25% от текущей непрозрачности каждого щелчка. Вы можете изменить расчет, чтобы настроить, насколько дополнительно он исчезает каждый раз.

http://jsfiddle.net/MPd3x/1/

James Montagne 23 фев. 2014, в 03:19

Ещё вопросы

Это не остановится на 1%, как описано в соответствии с его требованием.

ltalhouarne · Accepted Answer · 2014-02-23T02-38-00.000Z

Вы можете отслеживать переменную, которая увеличивается при каждом вызове:

var x=1;
$(document).ready(function() {  
   $("#2").click(function() {
      if((x*.75)>(.01)){
      x=x*.75; //whatever desired pattern       
      }
      $("#1").fadeTo(500, x);
   });

});

Добавление к непрозрачности противоположно тому, чего я хочу, я верю.
Большое спасибо за asnwer, скоро приму, было интересно, есть ли какой-нибудь способ не дать ху исчезнуть весь путь? например, если я хочу, чтобы он пошел на .1 и остановился?
Да, я соответственно отредактировал свой вопрос, он уменьшается на 25%, если он превышает 1%, то он остановится. Обратите внимание, что вы можете изменить схему уменьшения, изменив значение .75 .
ах, очень хорошая логика, большое спасибо
Это не убывающий линейный, как он описал в вопросе. Требуется много кликов, чтобы полностью исчезнуть, вместо 5 кликов ...