使用按钮单击淡化多个文本答案

【问题标题】：Fade Multipie Texts with Buttons Click使用按钮单击淡化多个文本
【发布时间】：2015-05-12 15:44:57
【问题描述】：

我想在我的网站上创建一个文本框或一个区域，并且页面中有大约 9 个按钮，我不想重定向到其他页面并在同一页面和同一文本框中打开或我创建的区域。

因此，如果有人单击按钮 1，则打开文本 1 及其带有淡入动画的图片，当单击按钮 2 时，文本 1 框会淡出，而带有图片的文本 2 会淡入等等。我该怎么做？

我试过这样的代码

$('.one').hide();
$('.two').hide();
$('.three').hide();

$('.btn1').click(function () {
    $('.one').fadeIn();
});

$('.btn2').click(function () {
    $('.one').fadeOut();
    $('.two').fadeIn();

});

$('.btn3').click(function () {
    $('.two').fadeOut();
    $('.three').fadeIn();
});

Fiddle

但是当点击按钮时，按钮位置不固定，会随着文字动画移动。

有没有办法对其他代码做同样的事情？

【问题讨论】：

jsfiddle.net/91jfvqwm/2
你可以这样使用：jqueryui.com/tabs
jQuery hide element while preserving its space in page layout的可能重复

标签： javascript jquery html css

【解决方案1】：

$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
    $.when($('.btnall').fadeOut()).done(function(){
    $('.one').fadeIn();
   });
});

$('.btn2').click(function () {
    $.when($('.btnall').fadeOut()).done(function(){
         $('.two').fadeIn();
    });


});

$('.btn3').click(function () {
   $.when($('.btnall').fadeOut()).done(function(){
    $('.three').fadeIn();
   });
});

我认为这就是你所需要的。 Updated Fiddle

【讨论】：

继续点击按钮
请澄清..你想说什么..我没有得到@Tushar
如果文字动画闪烁，请继续点击button 1
点击按钮仍会切换文本
@EOF 如果有 100 个元素，则不适合

【解决方案2】：

更具可扩展性和动态的解决方案：

$('button').on('click', function () {
    var targetEl = $(this).data('target');
    $.when($('.' + targetEl).siblings('input').fadeOut()).done(function () {
        $('.' + targetEl).fadeIn();
    });
});

HTML：

<input class="one" value="Text 1">
<input class="two" value="Text 2">
<input class="three" value="Text 3">
<br>
<button data-target="one" class="btn1">Button 1</button>
<br>
<button data-target="two" class="btn2">Button 2</button>
<br>
<button data-target="three" class="btn3">Button 3</button>

演示：https://jsfiddle.net/tusharj/91jfvqwm/8/

【讨论】：

【解决方案3】：

您可以在淡入新文本字段之前等待淡出完成。例如

$('.btn1').click(function () {
    $('.btnall').fadeOut('slow', function() {
    $('.one').fadeIn();
    });
});

【讨论】：