Question

＆＃13;

$(document).ready(function() {

  fade();

});


var fade = function() {

  $(".quotes").fadeOut(2000, function() {
    $(this).text("World")
  }).fadeIn(2000);

};

＆＃13;

.iam {
  display: inline-block;
  -webkit-transition-property: all;
  -webkit-transition-duration: 3s;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.quotes {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="quotes">first quote</h2>
</div>

＆＃13;

你可以看到文字＆＃34;我是＆＃34;函数改变文本后跳转，因为div的文本对齐中心。

我怎样才能使这种运动像一个缓慢的过渡而不是一个明显的跳跃？

Answer 1

啊哈！

这是一个非常黑客的伎俩。将元素置于包装div内。然后，在褪色时，强制它的宽度保持不变。现在，当它重新淡入时，将宽度设置为新文本的宽度。

Working fiddle

def removeRow(self, row, parent=QModelIndex()):
    self.beginRemoveRows(parent, row, row)
    self.cycles.remove(self.cycles[row])
    self.endRemoveRows()
    self.getData()

$(document).ready(function() {
  fade()
});

var fade = function() {
  $(".wrapper").css("width", $(".quotes").width() + "px")
  $(".quotes").fadeOut(2000, function() {
    $(this).text("World")

    $(".quotes").fadeIn(2000)
    $(".wrapper").animate({
      width: $(".quotes").width() + "px"
    }, 2000)

  })

};

.iam {
  display: inline-block;
  -webkit-transition-property: all;
  -webkit-transition-duration: 3s;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.wrapper {
  display: inline-block;
  overflow: visible !important;
}

Answer 2

由于我不认为您可以为text-align CSS属性设置动画，因此这是一个很难理解的问题。解决方法是使用margin-auto，而是将width 100% aligned设置为带有任意max-width的容器div $(document).ready(function() { fade(); }); var fade = function () { $(".quotes").fadeOut(2000, function() { $(this).text("World") }).fadeIn(2000); };（这是唯一的警告）。请参阅下面的小提琴：

https://jsfiddle.net/aodjgdhf/9/

＆＃13;

.iam{
    display: inline-block;
    -webkit-transition-property: all;
  -webkit-transition-duration: 3s;

}

#aligned{
    width: 100%;
	max-width: 300px;
	margin: 0 auto 5% ;
}

.quotes {
	display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
	<h2 class="iam">I am</h2>
	<h2 class="quotes">first quote</h2>
	</div>

＆＃13;

$ExportFile = "I:\SCRIPT\IPCNewScript\Result.csv"

$xlShiftDown = -4121
$objExcel=New-Object -ComObject Excel.Application
#$objExcel.Visible=$true
$objExcel.DisplayAlerts = FALSE

$WorkBook=$objExcel.Workbooks.Open($ExportFile)

$worksheet = $workbook.sheets.item("Result")

#Get row & column count
$objRange = $worksheet.UsedRange
$RowCount = $objRange.Rows.Count
$ColumnCount = $objRange.Columns.Count

for ( $i=3 ; $i -le 4; $i ++ ){
     $inc = 1
     $NexRow = $i + $inc
    for ( $j=1 ; $j -le 3; $j ++ ){

        $worksheet.Cells.Item($i,$j).Text
        $worksheet.Cells.Item($NexRow,$j).Text
        $MergeCells = $worksheet.Range($worksheet.Cells.Item($i,$j), $worksheet.Cells.Item($NexRow,$j))
        $MergeCells.Select() 
        $MergeCells.MergeCells = $true
        $MergeCells.Font.ColorIndex = 11 

        #$objRange.EntireColumn.AutoFit() | Out-Null
    }
}
$WorkBook.Save()
$objExcel.Quit()

＆＃13;

Answer 3

这是另一种不涉及大量变化并且可以是通用的方式。我们的想法是同时为opacity和max-width制作动画。只需确保max-width的值足够大于您正在使用的文本。

＆＃13;

var i=0;
var txt=["world","another text","first quote","lorem ipsum"]

var fade = function() {
  $(".quotes").animate({opacity:0,maxWidth:0},2000, function() {
    $(this).text(txt[i]);
  }).animate({opacity:1,maxWidth:180},2000);

};

$(document).ready(function() {
fade();
setInterval(function(){ 
  fade(); 
  i=(i+1)%4;
 
}, 5000);
});

＆＃13;

.iam {
  display: inline-block;
  -webkit-transition-property: all;
  -webkit-transition-duration: 3s;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.quotes {
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="quotes">first quote</h2>
</div>

＆＃13;

Answer 4

通过使用边距并使用jQuery的动画，您可以编写以下代码：

$(document).ready(function() {
  setTimeout(function() {
    $(".quotes").fadeOut(1000, function() {
      $(".quotes").css("margin-right", "40px");
      $(".quotes").text("World");
    });

    $(".iam").animate({
      left: '12px'
    }, 2000);

    $(".quotes").fadeIn(1000);
  }, 1000);

});

.iam {
  display: inline;
  position: relative;
  margin-right: 12px;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.quotes {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="quotes">first quote</h2>
</div>

使用text-align：center更改内容时，防止文本突然移动

4 个答案: