How can I increase the fading effect more and more with each call of the event using jQuery's fadeTo()?

Question

How can I increase the fading effect more and more with each call of the event using jQuery's fadeTo()?

I'm currently working on a script that is intended to gradually fade an image from 80% opacity to 1%, but every time I click, it goes straight to the set opacity. How can I make the fading effect continuous? Any help would be appreciated. Here is the code I have so far:

<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>

javascript jquery css

Answer 1

Answer №1

Here's the solution you've been looking for.

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

Answer 2

Here's the solution you've been looking for.

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

Answer 3

Answer №2

To effectively adjust the opacity of an element, you can either store the current opacity value in a variable or retrieve it using jQuery. Here's how you can do it:

First, fetch the current opacity value:

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

Answer 4

To effectively adjust the opacity of an element, you can either store the current opacity value in a variable or retrieve it using jQuery. Here's how you can do it:

First, fetch the current opacity value:

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

Answer 5

Answer №3

To monitor the growth of a variable that increments with each invocation, you can follow this method:

var y = 1;
$(document).ready(function() {  
   $("#2").click(function() {
      if((y * .75) > (.01)){
      y = y * .75; //adjust as needed       
      }
      $("#1").fadeTo(500, y);
   });

});

Answer 6

To monitor the growth of a variable that increments with each invocation, you can follow this method:

var y = 1;
$(document).ready(function() {  
   $("#2").click(function() {
      if((y * .75) > (.01)){
      y = y * .75; //adjust as needed       
      }
      $("#1").fadeTo(500, y);
   });

});

Answer 7

Answer №4

Here is an example that demonstrates a similar concept:

let transparency = 1;

$("#button2").click(function() {
    transparency = transparency * .6;

    $("#element1").fadeTo(500, transparency);
});

Each click will reduce the transparency by 40% of its current value. You can adjust the calculation to control how much it decreases each time.

http://jsfiddle.net/ABC123/4/

Answer 8

Here is an example that demonstrates a similar concept:

let transparency = 1;

$("#button2").click(function() {
    transparency = transparency * .6;

    $("#element1").fadeTo(500, transparency);
});

Each click will reduce the transparency by 40% of its current value. You can adjust the calculation to control how much it decreases each time.

http://jsfiddle.net/ABC123/4/

How can I increase the fading effect more and more with each call of the event using jQuery's fadeTo()?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

triggers an unexpected error in console.log

After a full day has passed, remove nodes from the Firebase database

Adjust grading system based on user interaction with JavaScript

How can I access the variable that evaluated as true in an if statement?

Error: Unable to execute $(...).stellar since it is not a recognized function

Establishing server communication and exchanging data values

The div element is not resizing properly when the phone is in landscape mode

What is the mechanism that guides a reverse while loop to determine its endpoint in JavaScript?

Tips for efficiently serving a static file without triggering a disk read

Organize a list in AngularJS by breaking it down based on its headers and displaying them in

Using JWT for my React-Redux application's server side authentication

Tips for incorporating an onClick event into a variable beyond the class extension

struggling to align menu items on both sides of a navbar

What is the correct way to use setInterval in a React component's constructor?

How can I create a drop-down list in Bootstrap 4 input?

Tips for designing a horseshoe-inspired meter using CSS

Can you help me understand how to access data from a selected option?

State loss occurs when moving to a different page using next/link

In MongoDB and Node.js, encountered error: 'Unable to access property 'collection' as it is undefined'

Storing dynamic content on a server and retrieving it for future use