Question

Jquery插件innerfade超过我的css造型边缘。无法重新调整它。

CSS：

.changer{
  margin: 0 auto;
  font-size: 2em;
  font-weight: bold;
}

HTML：

<div class='changer'>
    <p>Am a <span class='highlight1'>Web Maker </span></p>

    <p>Am a <span class='highlight1'>Windows Phone Dev</span></p>

    <p>Am a <span class='highlight1'>Reverse Engineer</span></p>

    <p>Am an <span class='highlight1'>UI/UX Lover </span></p>

    <p>Am a <span class='highlight1'>Geek</span></p>

    <p>Am a <span class='highlight1'>Human </span></p>
</div>

JQuery的：

$(document).ready(
    function(){
        $('.changer').innerfade({
            animationtype: 'slide',
            speed: 750,
            timeout: 2000,
            type: 'sequence',
            containerheight: '1em'
        });
});

请注意，在您添加innerfade插件之前，此代码无效，因此请注意，如果您正在测试代码。谢谢。

Answer 1

在innerFade.js插件中找到以下行[可能是第83行]：

// Set the z-index from highest to lowest (20, 19, 18...), hide everything and set position as absolute
for (var i = 0; i < $fade_object.elements.length; i++) {
      $($fade_object.elements[i]).hide(0).css('z-index', String($fade_object.elements.length-i)).css('position', 'absolute');
}

并更改for loop内的内容，如下所示：

$($fade_object.elements[i]).hide(0).css('z-index', String($fade_object.elements.length-i)).css('position', 'absolute').css('text-align','center').css('width','100%');

我在这里建议的是，当绝对定位时，div不会占用所有可用的水平空间。将宽度明确设置为100％将解决问题。因此，您需要修改插件，并为position:absolute内容text-align:center和width:100%设置另外两个属性。这样就可以了。

上述解决方案已经过测试，然后在此处发布。

Jquery Innerfade插件骑过css

1 个答案: