Utilize jQuery to create a smooth crossfade effect for images and then conceal them by

I want to smoothly transition a div with a background-image to another within the same container, all while maintaining fixed dimensions.

Using FadeIn and Out seems like the perfect solution for this task. I need the ability to click on each visible image, which isn't possible when simply adjusting opacity. However, I still desire that nice crossfading effect between the images.

HTML

<div class="image_container">
    <div id="image1"></div>
    <div id="image2" style="display:none"></div>
</div>

Here's a simplified version of my JavaScript code:

$( this ).click(function() {
  $( "#image1" ).fadeOut();
   $( "#image2" ).fadeIn();
}
jquerycssopacityfade

Answer №1

If you stack images in an absolute position and use jQuery to transition between them, you can achieve a fading effect like this:

<div class="image_container">
  <div id="image1"></div>
  <div id="image2" style="display:none"></div>
</div>

<script type="text/javascrtip">
  $(".image_container").click(function(){
    $(this).find("div").fadeOut();
    $(this).find("div:hidden").fadeIn();
  })
</script>

<style type="text/css">
  .image_container div {
    position:absolute;
    width:338px;
    height:225px;
    top:0;
    left:0;
  }

  #image1 {
    background-image:url(http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg);
  }

  #image2 {
    background-image:url(http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg);
  }
</style>

Check out this Fiddle for a demonstration: https://jsfiddle.net/zmur2v8q/1/

Click on the image to smoothly fade into the other one.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering "Access Denied" error with jQuery Ajax on Windows Phone 7/IE9

Struggling to use this code with jQuery on Windows Phone 7.5, encountering an "Access is Denied" issue every time I attempt an ajax request for XML. JSONP isn't a viable solution as the necessary data only exists in XML. Looking for guidance on how to ...

ajaxinternet-explorerwindows-phone-7jquery

Can jQuery be used to transfer a File from a File Input to a Controller?

Is there a way to successfully pass a file to my Controller as a HttpPostedFileBase using jQuery? I am trying to achieve this so that I can parse through the file and then return information back to the page. An example scenario would be allowing a user to ...

jqueryasp.net-mvcfile-uploadhttppostedfilebase

Retrieving an array using the $.post() method

I am utilizing the following code: $.post('fromDB.php', function(data) { eval(data); console.log(data); updateTimer(); }); In order to retrieve arrays from PHP. This is what PHP returns: var todayTimeMinutes = [0, 45, 35, 25, 40, 0 ...

phpjavascriptarraysdebuggingjquery

Issue encountered with jQuery nested hover events and the removeClass() function being triggered on mouseleave

I have a nested list structure that I am working with: <ul class="menu-wrapper"> <li> <a href="#">Menu item</a> <ul class="sub-menu"> <li> < ...

htmljquerycsshovernested-lists

What causes the breakdown of flexbox when set to column and wrap?

Here is the code I am working with: <div id="parent"> <div class="produit_sup"> <p>Aubergine</p> <p>Betterave</p> <p>Courgette</p> <p>Oignon</p> <p>Poir ...

htmlcssflexbox

Ways to determine if an object is either undefined or null

I'm facing an issue that keeps resurfacing, but I can't seem to find a solution for it. In my project, I have 5 divs and I want to hide the div that was previously clicked on. For example, if the user clicks on div 1 and then on div 2, div 1 sho ...

javascriptjqueryajaxscope

In VB.NET, one can easily detect the HTML tag and update its content

I currently have some data stored in a database, which looks like this: <p><font style="BACKGROUND-COLOR: gold" size="+2" face="Arial Black"><strong>test</strong><u> test1</u> </font>< ...

htmlcssasp.netvb.net

Leveraging the power of the JQuery on and off function to add and delete specific event listeners

In my current code, I am utilizing the JQuery on method to link an event handler to the window object: $(window).on('resize', function(e){ /** my functional code goes here **/ e.stopPropagation(); }); The issue I am facing is that this ...

javascriptjqueryjquery-events

How can I make the SVG change when hovering over the menu in Bootstrap?

Currently, I'm working on a bootstrap-inverse menu and I'm trying to implement a feature where the SVG logo changes its color to '#fff' when the menu is hovered over, instead of the default color of '#000'. Here's the sni ...

htmlcsstwitter-bootstrapsvg

Chrome Table not behaving as expected when expanding div

I'm encountering an issue on my website where everything works perfectly in Firefox, IE, and Safari, but there is a glitch in Chrome. You can see the problem here: http://tinyurl.com/chxg2tb In Chrome, the table at the bottom extends beyond the cont ...

htmlcssgoogle-chromecss-tables

if jade is being inconsistent

I am currently using expressjs in my app and have the following setup: app.get('/profile',index.profile); app.get('/',index.home); Within layout.jade, I have the following code: ... if typeof(username)!=='undefined' ...

cssexpresspug

The second Ajax request recreates the HTML content, resulting in duplication

I am trying to implement an AJAX request that will prepend a specific html block when link 1 is clicked in my DOM: $("#link1").on("click", function(){ $.get("myBlock.html", function(data){ $(".wrapper").prepend(data); }); }); This html block, which co ...

javascripthtmlajaxjquery

Navigate to a specific section in an Accordion with the help of jQuery

I currently have 2 pages: page1.html, which contains a series of links, and page2.html, where an Accordion is located. The Query: I'm wondering if it's feasible to link directly to a specific section within the Accordion. For instance, if I want ...

javascriptjqueryhtmlcss

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

I am having an issue with dynamically adding elements to the DOM and then trying to manipulate their behavior using jQuery's .on() function. However, for some reason, the DOM is not triggering the .on() event for these dynamically added elements. You ...

htmldomjquery

Clicking the submit button in JavaScript will trigger a request to the Spring MVC backend,

When I use the following code, it gives me an object response: @RequestMapping(value = "/NewLogin",method = RequestMethod.POST) public @ResponseBody Token getAllBooks( Token token = new Token(); token.setValue(encryptedMessage); return toke ...

javascriptajaxjqueryspring-mvc

Personalizing the hamburger icon in Bootstrap 4.0

I want to modify the color of the three lines as well as the border around the icon using CSS, but I'm unsure which tags to target. CSS: .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=& ...

csshtmlbootstrap-4

Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?

I am trying to work with a div element <body style="width: 100vw; height: 100vh"> <div id="containerDiv"> <div id="canvasDiv" /> </div> </body> My goal is to adjust the width of canvasDiv based on the screen size. ...

htmlcssbootstrap-4bootstrap-5

Utilizing Media Queries with Dynamic Vue Properties

On one of my website pages, I always have a Div element with a Background Image that changes based on Media Queries (for example, I fetch a smaller resolution from my CDN on mobile phones). However, since I retrieve the Image URL on Page Load, I need to s ...

javascriptcssvue.jsvuejs2

What is the correct way to deserialize a jQuery-serialized value in PHP?

Although I have successfully sent a jQuery serialized value to a PHP file, I am unable to unserialize the jQuery serialized value in PHP. Can anyone please guide me on how to properly unserialize a jQuery serialized value in a PHP file? Here is my jQuery c ...

phpjquery

Apply the transition property to all elements except for the text inside a specific tag

I'm wondering if it's possible to apply a hover transition effect to everything in this tag except the text within it. The desired effect is for the button to fade away while the text remains visible. Below is the code I have written so far: ul ...

htmlcsstransition