我有这个完美工作的jquery脚本,可以在按下按钮时隐藏和显示内容。我想对此做进一步的工作并添加内容,使内容略有褪色,使其看起来更平滑。我还希望这样,如果我在任何按钮之外按一下,它将返回到默认内容。我尝试通过CSS添加一些过渡渐变,但没有使其工作。所有帮助表示赞赏。
$(document).ready(function(){
// Put all the images in a JavaScript array
var $imgs = $(".section-link");
// If you store your content in an array of objects, you can do this without creating
// more than one display div. You'll just get the content from the object in the
// array that has the same index as the image (within a different array)
var data = [
{
title: "Fair trade",
text: "The Process from start is fair to all who are included in making our clothes."
},
{
title: "Toxicfree",
text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
},
{
title: "Quality",
text: "Our clothes have sustainable and high quality."
},
{
title: "Organic",
text: "All the materials and processes are fully organic and friendly to our planet."
},
{
title: "Vegan",
text: "We care about the animals, all clothes are crueltyfree and vegan."
},
];
// Get reference to the output area
var $outputDiv = $(".section-display");
// Set a click event handler for each of the images
$imgs.on("click", function(){
// Find the child elements within the output div that need updating and
// extract the content from the array of objects that correspond
// to the index of the image that was clicked.
$(".title", $outputDiv).text(data[$(this).index()-1].title);
$(".text", $outputDiv).text(data[$(this).index()-1].text);
});
});
.section-link {
width: 50px;
height: 50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="section-link fairtrade" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link toxicfree" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link quality" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link organic" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link vegan" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<div class="section-display active">
<h2 class="title">Default Title</h2>
<h2 class="text">Default Content</h2>
</div>
最佳答案
这就是您要寻找的东西,我用动画来实现我认为您想要的东西。
$(document).ready(function() {
// Put all the images in a JavaScript array
var $imgs = $(".section-link");
// If you store your content in an array of objects, you can do this without creating
// more than one display div. You'll just get the content from the object in the
// array that has the same index as the image (within a different array)
var data = [{
title: "Fair trade",
text: "The Process from start is fair to all who are included in making our clothes."
},
{
title: "Toxicfree",
text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
},
{
title: "Quality",
text: "Our clothes have sustainable and high quality."
},
{
title: "Organic",
text: "All the materials and processes are fully organic and friendly to our planet."
},
{
title: "Vegan",
text: "We care about the animals, all clothes are crueltyfree and vegan."
},
];
// Get reference to the output area
var $outputDiv = $(".section-display");
var defaulttext = $outputDiv.find(".text").text()
var defaultTitle = $outputDiv.find(".title").text();
// Set a click event handler for each of the images
$imgs.on("click", function() {
// Find the child elements within the output div that need updating and
// extract the content from the array of objects that correspond
// to the index of the image that was clicked.
$This = $(this)
$(".title", $outputDiv).animate({
opacity: 0
}, function() {
$(".title", $outputDiv).text(data[$This.index() - 1].title)
.animate({
opacity: 1
});
});
$(".text", $outputDiv).animate({
opacity: 0
}, function() {
$(".text", $outputDiv).text(data[$This.index() - 1].text)
.animate({
opacity: 1
});
})
});
$(document).on("click", function(e) {
if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
$(".title", $outputDiv).animate({
opacity: 0
}, function() {
$(".title", $outputDiv).text(defaultTitle)
.animate({
opacity: 1
});
});
$(".text", $outputDiv).animate({
opacity: 0
}, function() {
$(".text", $outputDiv).text(defaulttext)
.animate({
opacity: 1
});
})
}
})
});
.section-link {
width: 50px;
height: 50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="section-link fairtrade" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link toxicfree" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link quality" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link organic" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link vegan" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<div class="section-display active">
<h2 class="title">Default Title</h2>
<h2 class="text">Default Content</h2>
</div>
关于javascript - 添加淡入淡出并在div外按,以重置为Jquery隐藏并显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47120553/