My jQuery image thumb Slider features thumb buttons that link to different div elements.
When a user clicks on a thumb button, I want the associated div to smoothly fade in, replacing the previous one. The goal is to have a seamless transition between the div elements.
Despite spending a lot of time researching jQuery, I'm struggling to find the right solution among the many options available. I feel like there's something missing in my code, but I'm not sure what it is.
Below is the current state of my code:
CSS
Slider
#aemcSlider {
list-style:none;
margin-left: 289px;
width: 474px;
height: 97px;
top: 134px;
position: absolute;
overflow: hidden;
left: -3px;
}
#aemcSlider a {
margin-right: -4px;
}
#aemcPkgContainer {
z-index:1;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
#aemcGroundAdContainer {
z-index:2;
display: none;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
#aemcClampOnAdContainer {
z-index:3;
display: none;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
#aemcMetrixContainer {
z-index:4;
display: none;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
Buttons
//4 buttons like this//
a.aemcGroundFlexBut {
position:relative;
float: left;
margin: 0 auto;
display: block;
width: 162px;
height: 114px;
background: url(../Images/AEMC_AD_6472-74.png) no-repeat 0 0;
}
a.aemcGroundFlexBut:hover {
background-position: 0 -114px;
}
HTML
Jquery Slider
<div id="aemcSlider">
<ul>
<li><a class="aemcPkgBut" href="#"></a></li>
<li><a class="aemcGroundFlexBut" href="#"></a></li>
<li><a class="aemcClampBut" href="#"></a></li>
<li><a class="aemcMetrixBut" href="#"></a></li>
</ul>
</div>
Containers:
//There are 4 containers like this//
<div id="aemcPkgContainer">
<div class="workImage">
<img src="Images/AEMC_packaging_image.png" alt="Packaging"
width="295" hspace="0" vspace="0" border="0" title="Packaging"/>
</div>
</div>
JS:
// JavaScript Document
$(document).ready(function () {
$(".aemcPkgBut").click(function () {
$("#aemcGroundAdContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeOut(2500);
$("#aemcPkgContainer").fadeIn(2500);
});
$(".aemcGroundFlexBut").click(function () {
$("#aemcPkgContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeOut(2500);
$("#aemcGroundAdContainer").fadeIn(2500);
});
$(".aemcClampBut").click(function () {
$("#aemcPkgContainer").fadeOut(2500);
$("#aemcGroundAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeIn(2500);
});
$(".aemcMetrixBut").click(function () {
$("#aemcPkgContainer").fadeOut(2500);
$("#aemcGroundAdContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeIn(2500);
});
});
The current code is not functioning as desired, and I suspect it may have to do with the button type.
If anyone can provide some guidance or assistance, it would be greatly appreciated.
Thank you!