Squarespace网站切换img元素src时添加淡入淡出过渡效果的技术方案问询

Hey there! I totally get your frustration—swapping an <img> element's src directly won't trigger a transition because browsers don't animate source changes natively. The good news is we can pull off the fade effect without adding extra <img> elements, using a combination of CSS pseudo-elements, variables, and a little JavaScript tweaking. Here's how to make it work in your Squarespace setup:

Step 1: Preload Images (Avoid Lag) #

First, we'll preload all your hover images so there's no delay when the user hovers over a button. Add this snippet to your JavaScript:

// Preload all images to eliminate transition lag
images.forEach(imgSrc => {
  const img = new Image();
  img.src = imgSrc;
});

Step 2: Update CSS for Layered Transitions #

We'll use the .section-background container to hold both the original <img> and a pseudo-element that displays the hover image. The pseudo-element will transition its opacity to create the smooth fade effect:

.section-background {
  position: relative;
  overflow: hidden; /* Clip any overflow from the pseudo-element */
}

.section-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
}

/* Pseudo-element for hover image */
.section-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none; /* Let clicks pass through to buttons */
}

/* Show hover image when data attribute is set */
.section-background[data-hover-image]::before {
  opacity: 1;
  background-image: url(var(--hover-image-url));
}

Step 3: Modify JavaScript to Trigger Transitions #

Instead of swapping the <img>'s src, we'll update a CSS variable and data attribute on the container to toggle the pseudo-element's visibility:

let jw_backgroundContainer = document.querySelector('.section-background');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];

// Preload images to avoid transition lag
images.forEach(imgSrc => {
  const img = new Image();
  img.src = imgSrc;
});

jw_btn.forEach(function(jw_btn_current, index) {
    jw_btn_current.addEventListener('mouseenter', function() {
        // Set the hover image URL via CSS variable
        jw_backgroundContainer.style.setProperty('--hover-image-url', `url("${images[index]}")`);
        // Trigger the pseudo-element to show
        jw_backgroundContainer.setAttribute('data-hover-image', 'true');
    });
    jw_btn_current.addEventListener('mouseleave', function() {
        // Hide the pseudo-element
        jw_backgroundContainer.removeAttribute('data-hover-image');
    });
});

Why This Works #

• No Extra Elements: We're using a CSS pseudo-element instead of adding new <img> tags, which keeps your Squarespace markup clean and avoids any environment-specific headaches.
• Smooth Transitions: The opacity transition on both the original <img> and pseudo-element creates a seamless fade between images.
• Preloading: Ensures hover images are ready to go, so there's no flicker or delay when the user interacts with buttons.

This solution fits perfectly with your existing layout—you don't need to move the buttons or adjust the structure at all.

内容的提问来源于stack exchange，提问作者Ulvar