JQuery: проблема макета при загрузке и анимации страницы - PullRequest
Новая
       2

JQuery: проблема макета при загрузке и анимации страницы

0 голосов
/ 16 мая 2011

Я не могу исправить эту проблему в нерабочее время - когда страница загружается через jquery.load, текстовое поле падает, и оно смещается влево рядом с изображением, когда я использую jquery.animate, чтобы сделатьскользящий эффект слева направо.Текстовое серое поле не должно опускаться, так как я установил его плавающим влево в css.

Вот jquery, 

$('.block-item').click(function(){

         $('#container-article').remove();

        // Create a div after the parent clicked element.
        $(this).after('<div id="container-article"></div>');

        // Set the div to a variable and set its css.
        var container_article = $('#container-article').css({
            float:'left',
            width:0
            });

        // Load the article into container_article.
        container_article.load('article-3.php', function(){
            $(this).animate({
                width:800
            },500);
        });

        return false;
    });

Css, 

.block-item {
    width:50px;
    height:500px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    }

#article-content {
    width:500px;
    height:500px;
    background:#ccc;
    overflow:hidden;
    }

#image-content {
    float:left;
    }

html, 

<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>

загруженная страница, 

<!-- binder-article -->
<div id="binder-article">

<div id="image-content"><img src="pic-2.jpg"/></div>

<!-- article-right -->
<div id="article-content">

    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p>
    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p>

</div>
<!-- article-right -->

</div>

Как это исправить?

Или любая другая лучшая функция jquery, чем animate?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 16 мая 2011

А-а-а, тогда я вижу твою проблему ...
вместо того, чтобы перемещать содержимое связующего, попробуйте установить его как встроенный блок с nowrap на родительском объекте ...

Так что ваш CSS, который вы предоставили, должен быть заменен следующим (это должно сработать): 

.block-item {
    width:50px;
    height:500px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    }

#article-content {
    width:500px;
    height:500px;
    background:#ccc;
    overflow:hidden;
    }

#image-content {
    }

#parent_container {
    width:1165px;
   }

#binder-article > #image-content,
#binder-article > #article-content {
    display:inline-block;
    vertical-align:top;
    }

#binder-article {
    white-space:nowrap;
    }

(Это работает в этом случае, потому что элементы непосредственно внутри '# binder-article' являются divами, в отличие от другого сценария, когда содержимое может отсутствовать в каких-либо контейнерах)

0 голосов
/ 16 мая 2011

Вам нужно поместить свои блок-элементы в родительский контейнер и установить ширину этого родительского контейнера ... примерно так: 

<div id="parent_container">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
</div>

и немного CSS 

#parent_container {
 width:1165px;
}

Если блочные элементы являются динамическими по количеству, вы всегда можете посчитать их с помощью jQuery на готовом документе, умножить их количество на 50px (или независимо от их ширины) и добавить ширину контейнера-статьи 800px (или какой бы ни была его ширина), а затем установите для этого ширину родительских контейнеров.

...