Question

我想在我的网站上创建一个文本框或区域，我在页面中有大约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

但单击按钮时，按钮位置不固定，并随文本动画一起移动。

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

Answer 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

Answer 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/

Answer 3

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

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

使用按钮淡化Multipie文本单击

3 个答案: